From 8b9f587a6b72ba68c9d6f83cb0a56b9b8076c500 Mon Sep 17 00:00:00 2001 From: Ansh Goyal Date: Fri, 8 Mar 2024 09:33:36 +0000 Subject: [PATCH] fix exports and prop interface names --- .eslintrc | 9 ++++- components/AuthorAvatars.tsx | 11 ++++-- components/navigation/BlogPostItem.tsx | 44 ++++++++------------- components/newsroom/FeaturedBlogPost.tsx | 31 +++++---------- components/newsroom/Newsroom.tsx | 14 ++----- components/newsroom/NewsroomArticle.tsx | 9 ++--- components/newsroom/NewsroomBlogPosts.tsx | 3 +- components/newsroom/NewsroomSection.tsx | 3 +- components/newsroom/NewsroomYoutube.tsx | 8 ++-- components/newsroom/YouTubeCard.tsx | 28 ++++++------- components/newsroom/swiper.tsx | 2 +- types/components/navigation/BlogPostType.ts | 6 +++ 12 files changed, 71 insertions(+), 97 deletions(-) create mode 100644 types/components/navigation/BlogPostType.ts diff --git a/.eslintrc b/.eslintrc index 5b5a16b0e3c..3efc0ce9bc0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -22,7 +22,14 @@ "endOfLine": "auto" } ], - "max-len": 0 + "max-len": [ + "error", + { + "code": 120, + "ignoreUrls": true, + "ignorePattern": "*className=([\\s\\S]*?)*" // Ignore classnames + } + ] }, "globals": { "React": true, diff --git a/components/AuthorAvatars.tsx b/components/AuthorAvatars.tsx index e41b71331b7..3ffb1be4207 100644 --- a/components/AuthorAvatars.tsx +++ b/components/AuthorAvatars.tsx @@ -10,7 +10,12 @@ interface AuthorAvatarsProps { authors: Author[]; } -const AuthorAvatars: React.FC = ({ authors = [] }) => { +/** + * @description This component takes an array of authors and renders their avatars. + * @param {AuthorAvatarsProps} props - The component props. + * @param {Author[]} props.authors - The authors to render avatars for. + */ +export default function AuthorAvatars({ authors = [] }: AuthorAvatarsProps) { return ( <> {authors.map((author, index) => { @@ -36,6 +41,4 @@ const AuthorAvatars: React.FC = ({ authors = [] }) => { })} ); -}; - -export default AuthorAvatars; +} diff --git a/components/navigation/BlogPostItem.tsx b/components/navigation/BlogPostItem.tsx index 0f6aa0891bc..2a5893131e9 100644 --- a/components/navigation/BlogPostItem.tsx +++ b/components/navigation/BlogPostItem.tsx @@ -4,6 +4,8 @@ import type { Ref } from 'react'; import { forwardRef } from 'react'; import TextTruncate from 'react-text-truncate'; +import { BlogPostType } from '@/types/components/navigation/BlogPostType'; +import type { IBlogPost } from '@/types/post'; import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; import { ParagraphTypeStyle } from '@/types/typography/Paragraph'; @@ -11,45 +13,35 @@ import AuthorAvatars from '../AuthorAvatars'; import Heading from '../typography/Heading'; import Paragraph from '../typography/Paragraph'; -interface Author { - name: string; - photo: string; - link?: string; -} - -interface Post { - type: string; - alt?: string; - slug: string; - cover: string; - title: string; - excerpt: string; - authors: Author[]; - date: string; - readingTime: number; -} - -interface Props { - post: Post; +interface BlogPostItemProps { + post: IBlogPost; className?: string; id?: string; } -const BlogPostItem = forwardRef(function BlogPostItem({ post, className = '', id = '' }: Props, +/** + * @description Functional component representing a single blog post item. + * @param {Object} props - Props for the BlogPostItem component. + * @param {IBlogPost} props.post - The blog post data. + * @param {string} [props.className=''] - Additional CSS classes for styling. + * @param {string} [props.id=''] - The HTML id attribute for the component. + * @param {Ref} ref - Reference object for the component. + */ +export default forwardRef(function BlogPostItem({ post, className = '', id = '' }: BlogPostItemProps, ref: Ref) { let typeColors: [string, string] = ['bg-indigo-100', 'text-indigo-800']; switch (post.type.toLowerCase()) { - case 'video': + case BlogPostType.Video: typeColors = ['bg-pink-100', 'text-pink-800']; break; - case 'marketing': + case BlogPostType.Marketing: typeColors = ['bg-orange-100', 'text-orange-800']; break; - case 'strategy': + case BlogPostType.Strategy: typeColors = ['bg-green-100', 'text-green-800']; break; - case 'communication': + case BlogPostType.Communication: typeColors = ['bg-teal-100', 'text-teal-800']; break; default: @@ -133,5 +125,3 @@ const BlogPostItem = forwardRef(function BlogPostItem({ post, className = '', id ); }); - -export default BlogPostItem; diff --git a/components/newsroom/FeaturedBlogPost.tsx b/components/newsroom/FeaturedBlogPost.tsx index d84f19e29be..e9b2beecc46 100644 --- a/components/newsroom/FeaturedBlogPost.tsx +++ b/components/newsroom/FeaturedBlogPost.tsx @@ -2,6 +2,8 @@ import moment from 'moment'; import Link from 'next/link'; import TextTruncate from 'react-text-truncate'; +import { BlogPostType } from '@/types/components/navigation/BlogPostType'; +import type { IBlogPost } from '@/types/post'; import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading'; import { ParagraphTypeStyle } from '@/types/typography/Paragraph'; @@ -9,45 +11,30 @@ import AuthorAvatars from '../AuthorAvatars'; import Heading from '../typography/Heading'; import Paragraph from '../typography/Paragraph'; -interface Author { - name: string; - photo: string; - link?: string; - } - interface FeaturedBlogPostProps { - post: { - type: string; - slug: string; - cover: string; - title: string; - excerpt: string; - authors: Author[]; - date: string; - readingTime: number; - }; + post: IBlogPost; className?: string; } /** - * React component for rendering a featured blog post. + * @description Renders a featured blog post with the provided data. * @param {FeaturedBlogPostProps} props - The component props. - * @returns {JSX.Element} JSX element representing the featured blog post. + * @param {string} [props.className=''] - Additional CSS classes for styling. */ export default function FeaturedBlogPost({ post, className = '' }: FeaturedBlogPostProps) { let typeColors = ['bg-indigo-100', 'text-indigo-800']; switch (post.type.toLowerCase()) { - case 'video': + case BlogPostType.Video: typeColors = ['bg-pink-100', 'text-pink-800']; break; - case 'marketing': + case BlogPostType.Marketing: typeColors = ['bg-orange-100', 'text-orange-800']; break; - case 'strategy': + case BlogPostType.Strategy: typeColors = ['bg-green-100', 'text-green-800']; break; - case 'communication': + case BlogPostType.Communication: typeColors = ['bg-teal-100', 'text-teal-800']; break; default: diff --git a/components/newsroom/Newsroom.tsx b/components/newsroom/Newsroom.tsx index 197d3bd9045..ec7b7b7964e 100644 --- a/components/newsroom/Newsroom.tsx +++ b/components/newsroom/Newsroom.tsx @@ -12,17 +12,13 @@ import NewsroomBlogPosts from './NewsroomBlogPosts'; import NewsroomYoutube from './NewsroomYoutube'; /** - * A component representing the newsroom section of AsyncAPI website. - * @returns {JSX.Element} The JSX element representing the newsroom section. + * @description This component displays the latest updates, blog posts, news, and videos. */ export default function Newsroom() { return ( <>
- + Latest Updates @@ -81,11 +77,7 @@ export default function Newsroom() {
- +
diff --git a/components/newsroom/NewsroomArticle.tsx b/components/newsroom/NewsroomArticle.tsx index be2e0dc8817..6b4d2bd55b7 100644 --- a/components/newsroom/NewsroomArticle.tsx +++ b/components/newsroom/NewsroomArticle.tsx @@ -14,10 +14,9 @@ interface Article { } /** - * Represents an article in the newsroom section. - * @returns {JSX.Element} The JSX element representing the newsroom article. + * @description This component renders an article in the newsroom section. */ -const NewsroomArticle: React.FC = () => { +export default function NewsroomArticl() { return (
    {articlesData.map((article: Article, index: number) => ( @@ -42,6 +41,4 @@ const NewsroomArticle: React.FC = () => { ))}
); -}; - -export default NewsroomArticle; +} diff --git a/components/newsroom/NewsroomBlogPosts.tsx b/components/newsroom/NewsroomBlogPosts.tsx index 1dffc8f0678..c5036b12699 100644 --- a/components/newsroom/NewsroomBlogPosts.tsx +++ b/components/newsroom/NewsroomBlogPosts.tsx @@ -9,8 +9,7 @@ import BlogPostItem from '../navigation/BlogPostItem'; import { checkLastSnapIndex, useSwiperRef } from './swiper'; /** - * React component for displaying blog posts in a newsroom. - * @returns {JSX.Element} JSX element representing the NewsroomBlogPosts component. + * @description This component displays the latest blog posts. */ export default function NewsroomBlogPosts() { const [nextEl, nextElRef] = useSwiperRef(); diff --git a/components/newsroom/NewsroomSection.tsx b/components/newsroom/NewsroomSection.tsx index 846cd875bfc..48a1b2af257 100644 --- a/components/newsroom/NewsroomSection.tsx +++ b/components/newsroom/NewsroomSection.tsx @@ -9,8 +9,7 @@ import Paragraph from '../typography/Paragraph'; import FeaturedBlogPost from './FeaturedBlogPost'; /** - * Represents the Newsroom section component. - * @returns {JSX.Element} JSX representation of the component. + * @description This component displays the latest news, events, and blog posts. */ export default function NewsroomSection() { const { t } = useTranslation('common'); diff --git a/components/newsroom/NewsroomYoutube.tsx b/components/newsroom/NewsroomYoutube.tsx index c6c5e24f0dc..91015b93788 100644 --- a/components/newsroom/NewsroomYoutube.tsx +++ b/components/newsroom/NewsroomYoutube.tsx @@ -8,16 +8,16 @@ import ArrowRight from '../icons/ArrowRight'; import { checkLastSnapIndex, useSwiperRef } from './swiper'; import YouTubeCard from './YouTubeCard'; -interface Props { +interface NewsroomYoutubeProps { className?: string; } /** * Newsroom Youtube component displays a Swiper carousel of YouTubeCard components. - * @param {Props} props - The props for the component. - * @returns {JSX.Element} - Rendered component. + * @description This component displays the latest videos from the AsyncAPI YouTube channel. + * @param {string} [props.className=''] - Additional CSS classes for styling. */ -export default function NewsroomYoutube({ className = '' }: Props) { +export default function NewsroomYoutube({ className = '' }: NewsroomYoutubeProps) { const [nextEl, nextElRef] = useSwiperRef(); const [prevEl, prevElRef] = useSwiperRef(); const [current, setCurrent] = useState(0); diff --git a/components/newsroom/YouTubeCard.tsx b/components/newsroom/YouTubeCard.tsx index 1fcf2e11403..f7d9ffa2b1b 100644 --- a/components/newsroom/YouTubeCard.tsx +++ b/components/newsroom/YouTubeCard.tsx @@ -15,25 +15,24 @@ interface YouTubeVideo { videoId: string; } -interface Props { +interface YouTubeCardProps { video: YouTubeVideo; } /** - * Represents a YouTube video card. + * @description This component displays a YouTube video card with an image, title, description, and link to the video. * @param {Props} video - The video object containing image, title, description, and videoId. - * @returns {JSX.Element} The JSX element representing the YouTube video card. */ -const YouTubeCard: React.FC = ({ video }) => { +export default function YouTubeCard({ video }: YouTubeCardProps) { return (
  • -
    - video +
    + video
    @@ -46,10 +45,7 @@ const YouTubeCard: React.FC = ({ video }) => {
    - + Watch on Youtube @@ -59,6 +55,4 @@ const YouTubeCard: React.FC = ({ video }) => {
    • ); -}; - -export default YouTubeCard; +} diff --git a/components/newsroom/swiper.tsx b/components/newsroom/swiper.tsx index 201278df4f3..1118cc36e8f 100644 --- a/components/newsroom/swiper.tsx +++ b/components/newsroom/swiper.tsx @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'; /** * Custom hook to manage swiper reference. - * @returns A tuple containing the wrapper element and a ref object. + * @description This hook returns a tuple containing the wrapper element and a ref object. */ export function useSwiperRef(): [HTMLButtonElement | null, React.RefObject] { const [wrapper, setWrapper] = useState(null); diff --git a/types/components/navigation/BlogPostType.ts b/types/components/navigation/BlogPostType.ts new file mode 100644 index 00000000000..d3853e52a6e --- /dev/null +++ b/types/components/navigation/BlogPostType.ts @@ -0,0 +1,6 @@ +export enum BlogPostType { + Video = 'video', + Marketing = 'marketing', + Strategy = 'strategy', + Communication = 'communication', +}