Migrate custom docs components to typescript

docs/src/components/Color.js

@@ -1,9 +0,0 @@
-import React from "react";
-import styles from "./styles.module.css";
-
-export default ({ hex }) => (
-    <div className={styles.colorCode}>
-        <span style={{ backgroundColor: hex }} className={styles.color} />
-        <span className={styles.code}>{hex}</span>
-    </div>
-);

docs/src/components/Color.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+
+type ColorProps = {
+  hex: string;
+};
+
+const Color = (props: React.PropsWithChildren<ColorProps>): JSX.Element => {
+  const { hex } = props;
+  return (
+    <div className={styles.colorCode}>
+      <span style={{ backgroundColor: hex }} className={styles.color} />
+      <span className={styles.code}>{hex}</span>
+    </div>
+  );
+};
+
+export default Color;

docs/src/components/Datetime.js

@@ -1,7 +0,0 @@
-import React from "react";
-
-export default ({ year = false, ...props }) => {
-    const date = new Date();
-    const granularity = year ? date.getFullYear() : date.toString();
-    return <span {...props}>{granularity}</span>;
-};

docs/src/components/Datetime.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+type DatetimeProps = {
+  year?: boolean;
+};
+
+const Datetime = (
+  props: React.PropsWithChildren<DatetimeProps>
+): JSX.Element => {
+  const { year } = props;
+  const date = new Date();
+  const granularity = year ? date.getFullYear() : date.toString();
+  return <span {...props}>{granularity}</span>;
+};
+
+export default Datetime;

docs/src/components/Font.tsx

@@ -1,8 +1,13 @@
-import React from "react";
+import * as React from "react";
 import clsx from "clsx";
 import styles from "./fonts.module.css";
 
-export default ({ name }) => {
+type FontProps = {
+  name: string;
+};
+
+const Font = (props: React.PropsWithChildren<FontProps>): JSX.Element => {
+  const { name } = props;
   const fontClass = { Nunito: "fontBody", "Fira Code": "fontMono" };
   return (
     <a href={`https://fonts.google.com/specimen/${name.split(" ").join("+")}`}>
@@ -10,3 +15,5 @@ export default ({ name }) => {
     </a>
   );
 };
+
+export default Font;

docs/src/components/JSXCode.js

@@ -1,4 +0,0 @@
-import React from "react";
-import styles from "./styles.module.css";
-
-export default ({ children }) => <span className={styles.code}>{children}</span>;

docs/src/components/JSXCode.tsx

@@ -0,0 +1,8 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+
+const JSXCode = (props: React.ComponentProps<"span">): JSX.Element => {
+  return <span className={styles.code} {...props} />;
+};
+
+export default JSXCode;

docs/src/components/MiniNote.js

@@ -1,17 +0,0 @@
-import React from "react";
-
-export default ({ children, newLine = true }) => (
-    <>
-        {newLine && <br />}
-        <span
-            style={{
-                fontSize: "var(--ifm-font-size-sm)",
-                color: "var(--ifm-blockquote-color)",
-                display: "inline-block",
-                fontStyle: "italic"
-            }}
-        >
-            {children}
-        </span>
-    </>
-);

docs/src/components/MiniNote.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+type MiniNodeProps = {
+  newLine: boolean;
+};
+
+const MiniNote = (
+  props: React.PropsWithChildren<MiniNodeProps>
+): JSX.Element => {
+  const { newLine, children } = props;
+  return (
+    <>
+      {newLine && <br />}
+      <span
+        style={{
+          fontSize: "var(--ifm-font-size-sm)",
+          color: "var(--ifm-blockquote-color)",
+          display: "inline-block",
+          fontStyle: "italic",
+        }}
+      >
+        {children}
+      </span>
+    </>
+  );
+};
+
+export default MiniNote;

docs/src/components/Native.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import styles from "./styles.module.css";
+
+const Native = (props: React.ComponentProps<"span">): JSX.Element => {
+  const { children } = props;
+  return <span className={styles.Native}>{children}</span>;
+};
+
+export default Native;

docs/src/components/PageLink.js

@@ -1,8 +0,0 @@
-import React from "react";
-import Link from "@docusaurus/Link";
-
-export default ({ children, to }) => (
-    <Link to={to} style={{ textDecoration: "unset" }}>
-        {children}
-    </Link>
-);

docs/src/components/PageLink.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import Link from "@docusaurus/Link";
+
+import type { LinkProps } from "@docusaurus/Link";
+
+const PageLink = (props: React.PropsWithChildren<LinkProps>): JSX.Element => {
+  return <Link style={{ textDecoration: "unset" }} {...props} />;
+};
+
+export default PageLink;

docs/src/components/RegexPattern.js

@@ -1,15 +0,0 @@
-import React from "react";
-import Code from "./JSXCode";
-
-const patternMap = {
-    aspath_asdot: String.raw`^(\^|^\_)((\d+\.\d+)\_|(\d+\.\d+)\$|(\d+\.\d+)\(\_\.\+\_\))+$`,
-    aspath_asplain: String.raw`^(\^|^\_)(\d+\_|\d+\$|\d+\(\_\.\+\_\))+$`,
-    community_decimal: String.raw`^[0-9]{1,10}$`,
-    community_extended: String.raw`^([0-9]{0,5})\:([0-9]{1,5})$`,
-    community_large: String.raw`^([0-9]{1,10})\:([0-9]{1,10})\:[0-9]{1,10}$`
-};
-
-export default ({ pattern }) => {
-    const thisPattern = patternMap[pattern];
-    return <Code>'{thisPattern}'</Code>;
-};

docs/src/components/RegexPattern.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useMemo } from "react";
+import Code from "./JSXCode";
+
+const PATTERN_MAP = {
+  aspath_asdot: String.raw`^(\^|^\_)((\d+\.\d+)\_|(\d+\.\d+)\$|(\d+\.\d+)\(\_\.\+\_\))+$`,
+  aspath_asplain: String.raw`^(\^|^\_)(\d+\_|\d+\$|\d+\(\_\.\+\_\))+$`,
+  community_decimal: String.raw`^[0-9]{1,10}$`,
+  community_extended: String.raw`^([0-9]{0,5})\:([0-9]{1,5})$`,
+  community_large: String.raw`^([0-9]{1,10})\:([0-9]{1,10})\:[0-9]{1,10}$`,
+};
+
+type RegexPatternProps = {
+  pattern: keyof typeof PATTERN_MAP;
+};
+
+const RegexPattern = (
+  props: React.PropsWithChildren<RegexPatternProps>
+): JSX.Element => {
+  const { pattern } = props;
+  const thisPattern = useMemo<string>(() => PATTERN_MAP[pattern], [pattern]);
+  return <Code>'{thisPattern}'</Code>;
+};
+
+export default RegexPattern;

docs/src/components/Required.js

@@ -1,5 +0,0 @@
-import React from "react";
-
-export default () => (
-    <span style={{ color: "var(--ifm-color-danger)", display: "inline-block" }}>*</span>
-);

docs/src/components/Required.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+const Required = (): JSX.Element => {
+  return (
+    <span style={{ color: "var(--ifm-color-danger)", display: "inline-block" }}>
+      *
+    </span>
+  );
+};
+
+export default Required;

docs/src/components/styles.module.css

@@ -1,25 +1,31 @@
 .code {
-    background-color: var(--ifm-code-background);
-    color: var(--ifm-code-color);
-    font-family: var(--ifm-font-family-monospace);
-    font-size: var(--ifm-code-font-size);
-    border-radius: var(--ifm-code-border-radius);
-    margin: 0;
-    padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal);
-    font-style: normal;
+  background-color: var(--ifm-code-background);
+  color: var(--ifm-code-color);
+  font-family: var(--ifm-font-family-monospace);
+  font-size: var(--ifm-code-font-size);
+  border-radius: var(--ifm-code-border-radius);
+  margin: 0;
+  padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal);
+  font-style: normal;
 }
 
 .color {
-    border-radius: var(--ifm-global-radius);
-    display: inline-flex;
-    height: 1.5rem;
-    width: 1.5rem;
-    margin-right: 0.5rem;
-    padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal);
+  border-radius: var(--ifm-global-radius);
+  display: inline-flex;
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-right: 0.5rem;
+  padding: var(--ifm-code-padding-vertical) var(--ifm-code-padding-horizontal);
 }
 
 .colorCode {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.Native {
+  /* color: var(--ifm-link-color); */
+  color: var(--ifm-color-success);
+  font-weight: bold;
 }