resolve linting error by migrating custom components to typescript

src/components/AttributeTable/index.js → src/components/AttributeTable/index.tsx

@@ -1,11 +1,9 @@
-import React from "react";
-
+import React, { type ReactNode } from "react";
 import { ListItem } from "./ListItem";
 
 import styles from "./styles.module.scss";
 
-export const AttributeTable = ({ children }) => {
-
+export function AttributeTable({ children }): ReactNode {
   const renderArray = [];
   children.props.children
     .filter((child) => child !== "\n")

src/components/CodeExample.tsx

@@ -0,0 +1,37 @@
+import React, { type ReactNode } from 'react';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import CodeBlock from '@theme/CodeBlock';
+import { CODE_LANGS } from "@site/config/constants";
+import Translate from '@docusaurus/Translate';
+
+export function CodeExample({ children }): ReactNode {
+  return (
+    <Tabs groupId="programming-language">
+      {React.Children.map(children, (child, index) => {
+        const codeProps = child.props.children.props;
+        const { className = '' } = codeProps;
+
+        const [, language] = className.split('-');
+
+        return (
+          <TabItem
+            key={language || index}
+            value={language || index}
+            label={CODE_LANGS[language] ||
+              <Translate
+                id='components.CodeExample.NoLanguageTabTitle'
+                description='The tab title for a code example where no programming language was specified'>
+                Example
+              </Translate>
+            }
+          >
+            <CodeBlock language={language} showLineNumbers>
+              {codeProps.children}
+            </CodeBlock>
+          </TabItem>
+        );
+      })}
+    </Tabs>
+  );
+};

src/components/EndpointsTable.js → src/components/EndpointsTable.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { MethodTable } from "./MethodTable";
 import Translate from "@docusaurus/Translate";
 
@@ -10,6 +10,8 @@ const transledEndpoints = (
   </Translate>
 )
 
-export const EndpointsTable = ({ children, title = transledEndpoints }) => (
-  <MethodTable title={title}>{children}</MethodTable>
-);
+export function EndpointsTable({ children, title = transledEndpoints }): ReactNode {
+  return (
+    <MethodTable title={title}>{children}</MethodTable>
+  );
+};

src/components/RedirectPage.tsx

@@ -0,0 +1,11 @@
+import React, { useEffect, type ReactNode } from 'react';
+
+export function RedirectPage({ to }: { to: string }): ReactNode {
+  useEffect(() => {
+    window.location.href = to;
+  }, [to]);
+
+  return null;
+}
+
+export default RedirectPage;

src/components/WrapperApiReference.js → src/components/WrapperApiReference.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import clsx from "clsx";
 
 import { partition } from "@site/src/helpers";
@@ -11,7 +11,7 @@ const RIGHT_COLUMN_COMPONENTS_NAME = {
   table: "table",
 };
 
-export const WrapperApiReference = ({ children, ...props }) => {
+export function WrapperApiReference({ children, ...props }): ReactNode {
   const [rightColumnContent, middleColumnContent] = React.useMemo(
     () =>
       partition(

src/components/YouTube/index.tsx

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react';
+
+export function YouTube({ ID }: { ID: string; }): ReactNode {
+  return (
+    <div style={{
+      position: "relative",
+      width: "100%",
+      paddingBottom: "56.25%", // Make 16 x 9
+      height: 0,
+      marginBottom: "23px"
+    }}>
+      <iframe
+        src={`https://www.youtube-nocookie.com/embed/${ID}?controls=0&rel=0&modestbranding=1`}
+        title="Informational explainer"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" // tilt screen
+        allowFullScreen
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%",
+          border: "0px",
+          borderRadius: "25pt",
+        }}
+      ></iframe>
+    </div>
+  );
+};
+
+export default YouTube;