move js components to ts (#159)

* move js components to ts

* ts for button, goals, home and latest news components

* ts for faq

* theme types

* ts fixes

* add mdx eslint

* cr amendments

src/components/Accordion/Item.tsx

@@ -3,7 +3,7 @@ import { useLocation } from "@docusaurus/router";
 
 import React, { useEffect, useRef } from "react";
 
-type AccordionItemProps = {
+export type AccordionItemProps = {
   children: React.ReactNode;
   summary: string;
   open?: boolean;

src/components/Button/index.tsx

@@ -12,20 +12,29 @@ export default function Button({
   className,
   ...rest
 }: ButtonProps) {
-  const Tag = "href" in rest ? Link : "button";
+  const computedClassName = clsx(
+    "border font-bold h-12 px-6 flex items-center hover:no-underline transition-colors",
+    variant === "primary" &&
+      "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600 hover:text-gray-900",
+    variant === "secondary" &&
+      "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50",
+    className,
+  );
+
+  if ("href" in rest) {
+    return (
+      <Link {...rest} className={computedClassName}>
+        {children}
+      </Link>
+    );
+  }
+
   return (
-    <Tag
-      {...rest}
-      className={clsx(
-        "border font-bold h-12 px-6 flex items-center hover:no-underline transition-colors",
-        variant === "primary" &&
-          "bg-brand-500 text-gray-900 hover:bg-brand-600 border-brand-500 hover:border-brand-600 hover:text-gray-900",
-        variant === "secondary" &&
-          "border-gray-200 dark:border-gray-800 text-gray-900 dark:text-gray-50 bg-transparent hover:border-gray-900 dark:hover:border-gray-50 hover:text-gray-900 dark:hover:text-gray-50 aria-selected:border-gray-900 dark:aria-selected:border-gray-50",
-        className,
-      )}
+    <button
+      {...(rest as unknown as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      className={computedClassName}
     >
       {children}
-    </Tag>
+    </button>
   );
 }

src/components/FAQ/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Accordion from "../Accordion";
-import AccordionItem from "../Accordion/Item";
+import AccordionItem, { AccordionItemProps } from "../Accordion/Item";
 import Button from "../Button";
 import Faq from "../../../faq.mdx";
 import { MDXProvider } from "@mdx-js/react";
@@ -17,12 +17,14 @@ export default function FAQ() {
         <Accordion>
           <MDXProvider
             components={{
-              AccordionItem: (props) =>
+              AccordionItem: (props: AccordionItemProps) =>
                 props.highlight ? <AccordionItem {...props} /> : null,
-              a: (props) => (
+              a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
                 <Link className="text-inherit underline" {...props} />
               ),
-              blockquote: (props) => (
+              blockquote: (
+                props: React.BlockquoteHTMLAttributes<HTMLQuoteElement>
+              ) => (
                 <blockquote
                   className="border-l-4 border-gray-300 text-inherit pl-4"
                   {...props}

src/components/GitHubStarsNavbarItem/index.tsx

@@ -1,4 +1,6 @@
 import React from "react";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore should be fixed when upgrating to docusaurus v3
 import GitHubButton from "react-github-btn";
 import { useColorMode } from "@docusaurus/theme-common";
 
@@ -12,6 +14,7 @@ export default function GitHubStartNavbarItem({
   buttonLabel,
 }: GitHubStartNavbarItemProps) {
   const { colorMode } = useColorMode();
+
   return (
     <div className="flex items-center [&_span]:flex">
       <GitHubButton

src/components/Goals/index.tsx

@@ -1,11 +1,17 @@
-import React from "react";
+import React, { ComponentType, SVGProps } from "react";
 import ExpandIcon from "../../icons/expand.svg";
 import DotsIcon from "../../icons/dots.svg";
 import ScaleIcon from "../../icons/scale.svg";
 import LayersIcon from "../../icons/layers.svg";
 import HumidityIcon from "../../icons/humidity.svg";
 
-function Goal({ icon: Icon, title, description }) {
+type GoalProps = {
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  title: string;
+  description: string;
+};
+
+function Goal({ icon: Icon, title, description }: GoalProps) {
   return (
     <div className="bg-white dark:bg-blue-900 p-6">
       <Icon className="w-12 mb-4" aria-hidden />

src/components/Home/index.tsx

@@ -6,9 +6,13 @@ import Supporters from "../Supporters";
 import FAQ from "../FAQ";
 import HowToSupport from "../HowToSupport";
 import HowToContribute from "../HowToContribute";
-import LatestNews from "../LatestNews";
+import LatestNews, { RecentPost } from "../LatestNews";
 
-export default function Home({ recentPosts }) {
+type HomeProps = {
+  recentPosts: RecentPost[];
+};
+
+export default function Home({ recentPosts }: HomeProps) {
   return (
     <Layout description="The open source infrastructure as code tool.">
       <Hero />

src/components/LatestNews/index.tsx

@@ -1,8 +1,18 @@
-import React from "react";
+import React, { JSXElementConstructor } from "react";
 import Button from "../Button";
 import Link from "@docusaurus/Link";
+import { PropBlogPostMetadata } from "@docusaurus/plugin-content-blog";
 
-export default function LatestNews({ recentPosts }) {
+export type RecentPost = {
+  metadata: PropBlogPostMetadata;
+  Preview: JSXElementConstructor<unknown>;
+};
+
+type LatestNewsProps = {
+  recentPosts: RecentPost[];
+};
+
+export default function LatestNews({ recentPosts }: LatestNewsProps) {
   const {
     metadata: { title, formattedDate, date, frontMatter, permalink },
     Preview,

src/components/Supporters/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Suporter } from "@site/src/components/SupportersList/types";
 import supporters from "../../../supporters.json";
 
 import Button from "../Button";
@@ -51,7 +52,7 @@ export default function Supporters() {
         {types.map(([type, supporters], index) => (
           <SupporterType
             key={type}
-            count={supporters.length}
+            count={(supporters as Suporter[]).length}
             withSeparator={index < types.length - 1}
             type={type}
           />

src/components/SupportersList/index.tsx

@@ -1,13 +1,9 @@
 import React from "react";
 import Link from "@docusaurus/Link";
+import { Suporter } from "@site/src/components/SupportersList/types";
 
 type SupportersListProps = {
-  list: {
-    name: string;
-    url: string;
-    pledge: string;
-    type: string;
-  }[];
+  list: Suporter[];
 };
 
 export default function SupportersList({ list }: SupportersListProps) {

src/components/SupportersList/types.ts

@@ -0,0 +1,6 @@
+export type Suporter = {
+  name: string;
+  url: string;
+  pledge: string;
+  type: string;
+};

src/theme/BlogLastPost/index.tsx

@@ -2,8 +2,15 @@ import React from "react";
 import PatternBg from "@site/src/components/PatternBg";
 import Button from "@site/src/components/Button";
 import Link from "@docusaurus/Link";
+import { PropBlogPostContent } from "@docusaurus/plugin-content-blog";
 
-export default function BlogLastPost({ item }) {
+type BlogLastPostProps = {
+  item: {
+    content: PropBlogPostContent;
+  };
+};
+
+export default function BlogLastPost({ item }: BlogLastPostProps) {
   const { permalink, title, date, formattedDate, description } =
     item.content.metadata;
 

src/theme/BlogLayout/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 
 import Layout from "@theme/Layout";
+import { Props } from "@theme/BlogLayout";
 
-export default function BlogLayout(props) {
+export default function BlogLayout(props: Props) {
   const { children, ...layoutProps } = props;
 
   return (

src/theme/BlogListItem/index.tsx

@@ -1,8 +1,15 @@
 import Link from "@docusaurus/Link";
 import Button from "@site/src/components/Button";
 import React from "react";
+import { PropBlogPostContent } from "@docusaurus/plugin-content-blog";
 
-export default function BlogListItem({ item }) {
+type BlogListItemProps = {
+  item: {
+    content: PropBlogPostContent;
+  };
+};
+
+export default function BlogListItem({ item }: BlogListItemProps) {
   const { permalink, title, date, formattedDate, description } =
     item.content.metadata;
 

src/theme/BlogListItems/index.tsx

@@ -1,7 +1,15 @@
 import React from "react";
 
 import BlogListItem from "@theme/BlogListItem";
-export default function BlogListItems({ items }) {
+import { PropBlogPostContent } from "@docusaurus/plugin-content-blog";
+
+type BlogListItemsProps = {
+  items: readonly {
+    content: PropBlogPostContent;
+  }[];
+};
+
+export default function BlogListItems({ items }: BlogListItemsProps) {
   return (
     <div className="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-x-6 gap-y-12 py-4 md:py-10 px-4">
       {items.map((item) => (

src/theme/BlogListPage/index.tsx

@@ -6,8 +6,9 @@ import BlogListPaginator from "@theme/BlogListPaginator";
 import SearchMetadata from "@theme/SearchMetadata";
 import BlogListItems from "@theme/BlogListItems";
 import BlogLastPost from "@theme/BlogLastPost";
+import { Props } from "@theme/BlogListPage";
 
-export default function BlogListPage(props) {
+export default function BlogListPage(props: Props) {
   const { metadata, items } = props;
 
   const { blogDescription, blogTitle } = metadata;

src/theme/BlogListPaginator/index.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 
 import Button from "@site/src/components/Button";
-export default function BlogListPaginator(props) {
+import { Props } from "@theme/BlogListPaginator";
+
+export default function BlogListPaginator(props: Props) {
   const { metadata } = props;
   const { previousPage, nextPage } = metadata;
   return (

src/theme/BlogPostItem/Content/index.tsx

@@ -3,8 +3,9 @@ import { blogPostContainerID } from "@docusaurus/utils-common";
 import { useBlogPost } from "@docusaurus/theme-common/internal";
 import MDXContent from "@theme/MDXContent";
 import TextContent from "@site/src/components/TextContent";
+import { Props } from "@theme/BlogPostItem/Content";
 
-export default function BlogPostItemContent({ children }) {
+export default function BlogPostItemContent({ children }: Props) {
   const { isBlogPostPage } = useBlogPost();
   return (
     <TextContent

src/theme/DocBreadcrumbs/index.tsx

@@ -7,15 +7,17 @@ import Link from "@docusaurus/Link";
 
 import HomeBreadcrumbItem from "@theme/DocBreadcrumbs/Items/Home";
 
+type BreadcrumbsItemLinkProps = {
+  children: ReactNode;
+  href: string | undefined;
+  isLast: boolean;
+};
+
 function BreadcrumbsItemLink({
   children,
   href,
   isLast,
-}: {
-  children: ReactNode;
-  href: string | undefined;
-  isLast: boolean;
-}) {
+}: BreadcrumbsItemLinkProps) {
   if (isLast) {
     return (
       <span className="text-gray-600 dark:text-gray-500" itemProp="name">

src/theme/DocCard/index.js → src/theme/DocCard/index.tsx

@@ -4,8 +4,17 @@ import {
   findFirstCategoryLink,
   useDocById,
 } from "@docusaurus/theme-common/internal";
+import type {
+  PropSidebarItemCategory,
+  PropSidebarItem,
+  PropSidebarItemLink,
+} from "@docusaurus/plugin-content-docs";
 
-function CardLayout({ href, title, description }) {
+type CardLayoutProps =
+  | Pick<PropSidebarItemCategory, "href" | "label" | "description">
+  | Pick<PropSidebarItemLink, "href" | "label" | "description">;
+
+function CardLayout({ href, label, description }: CardLayoutProps) {
   return (
     <div className="not-prose relative group flex flex-col gap-2 border border-gray-900 dark:border-gray-50 rounded-md p-4">
       <h2>
@@ -14,7 +23,7 @@ function CardLayout({ href, title, description }) {
           className="text-gray-900 dark:text-gray-50 hover:text-brand-700 dark:hover:text-brand-500 font-bold"
         >
           <span aria-hidden className="absolute inset-0"></span>
-          {title}
+          {label}
         </Link>
       </h2>
       {description && (
@@ -25,27 +34,40 @@ function CardLayout({ href, title, description }) {
     </div>
   );
 }
-function CardCategory({ item }) {
+
+type CardCategoryProps = {
+  item: PropSidebarItemCategory;
+};
+
+function CardCategory({ item }: CardCategoryProps) {
   const href = findFirstCategoryLink(item);
   // Unexpected: categories that don't have a link have been filtered upfront
   if (!href) {
     return null;
   }
   return (
-    <CardLayout href={href} title={item.label} description={item.description} />
+    <CardLayout href={href} label={item.label} description={item.description} />
   );
 }
-function CardLink({ item }) {
+
+type CardLinkProps = {
+  item: PropSidebarItemLink;
+};
+
+function CardLink({ item }: CardLinkProps) {
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout
       href={item.href}
-      title={item.label}
+      label={item.label}
       description={item.description ?? doc?.description}
     />
   );
 }
-export default function DocCard({ item }) {
+
+type DocCardProps = { item: PropSidebarItem };
+
+export default function DocCard({ item }: DocCardProps) {
   switch (item.type) {
     case "link":
       return <CardLink item={item} />;