From cb8a77ad3e05ad659cc8ba94575cddce062b1622 Mon Sep 17 00:00:00 2001 From: Elliot Date: Tue, 20 Jan 2026 10:15:10 -0600 Subject: [PATCH 1/2] resolve linting error by migrating custom components to typescript Fixes #1646 --- .../AttributeTable/ListItem/index.js | 57 ------------------- .../AttributeTable/{index.js => index.tsx} | 5 +- src/components/CodeExample.js | 35 ------------ src/components/CodeExample.tsx | 37 ++++++++++++ .../{EndpointsTable.js => EndpointsTable.tsx} | 10 ++-- src/components/RedirectPage.js | 16 ------ src/components/RedirectPage.tsx | 11 ++++ ...piReference.js => WrapperApiReference.tsx} | 4 +- src/components/YouTube.js | 34 ----------- src/components/YouTube/index.tsx | 31 ++++++++++ 10 files changed, 89 insertions(+), 151 deletions(-) delete mode 100644 src/components/AttributeTable/ListItem/index.js rename src/components/AttributeTable/{index.js => index.tsx} (79%) delete mode 100644 src/components/CodeExample.js create mode 100644 src/components/CodeExample.tsx rename src/components/{EndpointsTable.js => EndpointsTable.tsx} (57%) delete mode 100644 src/components/RedirectPage.js create mode 100644 src/components/RedirectPage.tsx rename src/components/{WrapperApiReference.js => WrapperApiReference.tsx} (87%) delete mode 100644 src/components/YouTube.js create mode 100644 src/components/YouTube/index.tsx diff --git a/src/components/AttributeTable/ListItem/index.js b/src/components/AttributeTable/ListItem/index.js deleted file mode 100644 index 7d06d4ae57..0000000000 --- a/src/components/AttributeTable/ListItem/index.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; -import Details from "@theme/Details"; - -import { combineAdjacentStrings, partition } from "@site/src/helpers"; - -import styles from "./styles.module.scss"; -import Translate from "@docusaurus/Translate"; - -export const ListItem = (props) => { - const children = props.children.props.children.filter((child) => child !== "\n"); - - const [name, sublist] = children; - - const [typeElement, descriptionElement] = sublist.props.children.filter((child) => child !== "\n"); - - const type = - typeElement.props.children === "skip" ? null : typeElement.props.children; - - const [description, collapsedChildren] = partition( - React.Children.toArray(descriptionElement.props.children), - (child) => child?.type?.name !== "MDXUl" && child?.type?.name !== "ul", - ); - - const collapsedList = []; - collapsedChildren.length > 0 && collapsedChildren[0].props.children - .filter((child) => child !== "\n") - .map((child, index) => { - collapsedList.push( - {child}, - ); - }); - - return ( -
  • -

    - {name} - {type} -

    - -

    {description}

    - - {collapsedList.length > 0 && ( -
    - - Show child attributes - - - }> - {collapsedList} -
    - )} -
    • - ); -}; diff --git a/src/components/AttributeTable/index.js b/src/components/AttributeTable/index.tsx similarity index 79% rename from src/components/AttributeTable/index.js rename to src/components/AttributeTable/index.tsx index fef1b2b007..eca095a063 100644 --- a/src/components/AttributeTable/index.js +++ b/src/components/AttributeTable/index.tsx @@ -1,10 +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 const AttributeTable = ({ children }): ReactNode => { const renderArray = []; children.props.children diff --git a/src/components/CodeExample.js b/src/components/CodeExample.js deleted file mode 100644 index 47ea63b7b7..0000000000 --- a/src/components/CodeExample.js +++ /dev/null @@ -1,35 +0,0 @@ -import React 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 const CodeExample = ({ children }) => ( - - {React.Children.map(children, (child, index) => { - const codeProps = child.props.children.props; - const { className = '' } = codeProps; - - const [, language] = className.split('-'); - - return ( - - Example - - } - > - - {codeProps.children} - - - ); - })} - -); diff --git a/src/components/CodeExample.tsx b/src/components/CodeExample.tsx new file mode 100644 index 0000000000..ced4b65408 --- /dev/null +++ b/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 ( + + {React.Children.map(children, (child, index) => { + const codeProps = child.props.children.props; + const { className = '' } = codeProps; + + const [, language] = className.split('-'); + + return ( + + Example + + } + > + + {codeProps.children} + + + ); + })} + + ); +}; diff --git a/src/components/EndpointsTable.js b/src/components/EndpointsTable.tsx similarity index 57% rename from src/components/EndpointsTable.js rename to src/components/EndpointsTable.tsx index a2db54903d..bec60fbd94 100644 --- a/src/components/EndpointsTable.js +++ b/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 = ( ) -export const EndpointsTable = ({ children, title = transledEndpoints }) => ( - {children} -); +export function EndpointsTable({ children, title = transledEndpoints }): ReactNode { + return ( + {children} + ); +}; diff --git a/src/components/RedirectPage.js b/src/components/RedirectPage.js deleted file mode 100644 index 3672c5cf2e..0000000000 --- a/src/components/RedirectPage.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { useEffect } from 'react'; -import PropTypes from 'prop-types'; - -function RedirectPage({ to }) { - useEffect(() => { - window.location.href = to; - }, [to]); - - return null; -} - -RedirectPage.propTypes = { - to: PropTypes.string.isRequired, -}; - -export default RedirectPage; \ No newline at end of file diff --git a/src/components/RedirectPage.tsx b/src/components/RedirectPage.tsx new file mode 100644 index 0000000000..4b6cd96279 --- /dev/null +++ b/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; diff --git a/src/components/WrapperApiReference.js b/src/components/WrapperApiReference.tsx similarity index 87% rename from src/components/WrapperApiReference.js rename to src/components/WrapperApiReference.tsx index 2a16427dbd..3eb7e909a3 100644 --- a/src/components/WrapperApiReference.js +++ b/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( diff --git a/src/components/YouTube.js b/src/components/YouTube.js deleted file mode 100644 index 848d9adcdd..0000000000 --- a/src/components/YouTube.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const YouTube = ({ ID }) => ( -
    - -
    -); - -YouTube.propTypes = { - ID: PropTypes.string.isRequired, -}; - -export default YouTube; \ No newline at end of file diff --git a/src/components/YouTube/index.tsx b/src/components/YouTube/index.tsx new file mode 100644 index 0000000000..6babf82b55 --- /dev/null +++ b/src/components/YouTube/index.tsx @@ -0,0 +1,31 @@ +import React, { type ReactNode } from 'react'; + +export function YouTube({ ID }: { ID: string; }): ReactNode { + return ( +
    + +
    + ); +}; + +export default YouTube; From 147b35ab99976a205948437adee1e04d679878fc Mon Sep 17 00:00:00 2001 From: Elliot Date: Tue, 20 Jan 2026 10:42:17 -0600 Subject: [PATCH 2/2] use exported function rather than const, for consistency --- src/components/AttributeTable/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/AttributeTable/index.tsx b/src/components/AttributeTable/index.tsx index eca095a063..b5d5070867 100644 --- a/src/components/AttributeTable/index.tsx +++ b/src/components/AttributeTable/index.tsx @@ -3,8 +3,7 @@ import { ListItem } from "./ListItem"; import styles from "./styles.module.scss"; -export const AttributeTable = ({ children }): ReactNode => { - +export function AttributeTable({ children }): ReactNode { const renderArray = []; children.props.children .filter((child) => child !== "\n")