refactor(website): convert website to TypeScript (#5328)

* Initial work

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Minor changes

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix error

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* This looks better

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Address suggestions

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Better style

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Better style

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Better context typing

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Update edit URL

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Minor refactor

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

website/src/components/BrowserWindow/index.tsx

@@ -5,11 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 
 import styles from './styles.module.css';
 
-function BrowserWindow({children, minHeight, url}) {
+interface Props {
+  children: ReactNode;
+  minHeight: number;
+  url: string;
+}
+
+function BrowserWindow({children, minHeight, url}: Props) {
   return (
     <div className={styles.browserWindow} style={{minHeight}}>
       <div className={styles.browserWindowHeader}>

website/src/components/ColorGenerator/index.tsx

@@ -6,17 +6,23 @@
  */
 
 import React, {useState} from 'react';
-
 import Color from 'color';
-
 import CodeBlock from '@theme/CodeBlock';
 
 import styles from './styles.module.css';
 
-const COLOR_SHADES = {
+const COLOR_SHADES: Record<
+  string,
+  {
+    adjustment: number;
+    adjustmentInput: string;
+    displayOrder: number;
+    codeOrder: number;
+  }
+> = {
   '--ifm-color-primary': {
     adjustment: 0,
-    adjustmentInput: 0,
+    adjustmentInput: '0',
     displayOrder: 3,
     codeOrder: 0,
   },
@@ -60,7 +66,7 @@ const COLOR_SHADES = {
 
 const DEFAULT_PRIMARY_COLOR = '3578e5';
 
-function ColorGenerator({children, minHeight, url}) {
+function ColorGenerator() {
   const [baseColor, setBaseColor] = useState(DEFAULT_PRIMARY_COLOR);
   const [shades, setShades] = useState(COLOR_SHADES);
   const color = Color('#' + baseColor);

website/src/components/Playground/index.tsx

@@ -45,7 +45,14 @@ const Playgrounds = [
   },
 ];
 
-function PlaygroundCard({name, image, url, description}) {
+interface Props {
+  name: string;
+  image: any;
+  url: string;
+  description: JSX.Element;
+}
+
+function PlaygroundCard({name, image, url, description}: Props) {
   return (
     <div className="col col--6 margin-bottom--lg">
       <div className={clsx('card')}>

website/src/components/TeamProfileCards/index.tsx

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {ReactNode} from 'react';
 import Translate from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 
-function WebsiteLink({to, children}) {
+function WebsiteLink({to, children}: {to: string; children?: ReactNode}) {
   return (
     <Link to={to}>
       {children || (
@@ -19,7 +19,21 @@ function WebsiteLink({to, children}) {
   );
 }
 
-function TeamProfileCard({className, name, children, githubUrl, twitterUrl}) {
+interface ProfileProps {
+  className?: string;
+  name: string;
+  children: ReactNode;
+  githubUrl?: string;
+  twitterUrl?: string;
+}
+
+function TeamProfileCard({
+  className,
+  name,
+  children,
+  githubUrl,
+  twitterUrl,
+}: ProfileProps) {
   return (
     <div className={className}>
       <div className="card card--full-height">
@@ -55,7 +69,7 @@ function TeamProfileCard({className, name, children, githubUrl, twitterUrl}) {
   );
 }
 
-function TeamProfileCardCol(props) {
+function TeamProfileCardCol(props: ProfileProps) {
   return (
     <TeamProfileCard {...props} className={'col col--6 margin-bottom--lg'} />
   );

website/src/components/showcase/ShowcaseCard/index.tsx

@@ -10,10 +10,10 @@ import React, {memo} from 'react';
 import styles from './styles.module.css';
 import clsx from 'clsx';
 import Image from '@theme/IdealImage';
-import {Tags, TagList} from '../../../data/users';
+import {Tags, TagList, TagType, User, Tag} from '../../../data/users';
 import {sortBy} from '../../../utils/jsUtils';
 
-function TagIcon({label, description, icon}) {
+function TagIcon({label, description, icon}: Tag) {
   return (
     <span
       className={styles.tagIcon}
@@ -24,7 +24,7 @@ function TagIcon({label, description, icon}) {
   );
 }
 
-function ShowcaseCardTagIcons({tags}) {
+function ShowcaseCardTagIcons({tags}: {tags: TagType[]}) {
   const tagObjects = tags
     .map((tag) => ({tag, ...Tags[tag]}))
     .filter((tagObject) => !!tagObject.icon);
@@ -34,12 +34,16 @@ function ShowcaseCardTagIcons({tags}) {
     TagList.indexOf(tagObject.tag),
   );
 
-  return tagObjectsSorted.map((tagObject, index) => (
-    <TagIcon key={index} {...tagObject} />
-  ));
+  return (
+    <>
+      {tagObjectsSorted.map((tagObject, index) => (
+        <TagIcon key={index} {...tagObject} />
+      ))}
+    </>
+  );
 }
 
-const ShowcaseCard = memo(function ({user}) {
+const ShowcaseCard = memo(function ({user}: {user: User}) {
   return (
     <div key={user.title} className="col col--4 margin-bottom--lg">
       <div className={clsx('card', styles.showcaseCard)}>

website/src/components/showcase/ShowcaseCheckbox/index.js

@@ -1,36 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import clsx from 'clsx';
-
-import styles from './styles.module.css';
-
-function ShowcaseCheckbox({
-  className,
-  name,
-  label,
-  onChange,
-  checked,
-  ...props
-}) {
-  const id = `showcase_checkbox_id_${name};`;
-  return (
-    <div className={clsx(props.className, styles.checkboxContainer)} {...props}>
-      <input
-        type="checkbox"
-        id={id}
-        name={name}
-        onChange={onChange}
-        checked={checked}
-      />
-      <label htmlFor={id}>{label}</label>
-    </div>
-  );
-}
-
-export default ShowcaseCheckbox;

website/src/components/showcase/ShowcaseCheckbox/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {ComponentProps, ReactNode} from 'react';
+import clsx from 'clsx';
+
+import styles from './styles.module.css';
+
+interface Props extends ComponentProps<'input'> {
+  label: ReactNode;
+}
+
+function ShowcaseCheckbox({title, className, label, ...props}: Props) {
+  const id = `showcase_checkbox_id_${props.name};`;
+  return (
+    <div className={clsx(className, styles.checkboxContainer)} title={title}>
+      <input type="checkbox" id={id} {...props} />
+      <label htmlFor={id}>{label}</label>
+    </div>
+  );
+}
+
+export default ShowcaseCheckbox;

website/src/components/showcase/ShowcaseSelect/index.tsx

@@ -5,17 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {ComponentProps} from 'react';
 
 import styles from './styles.module.css';
 
-function ShowcaseSelect({tag, label, onChange, value, children}) {
-  const id = `showcase_select_id_${tag};`;
+interface Props extends ComponentProps<'select'> {
+  label: string;
+}
+
+function ShowcaseSelect({label, ...props}: Props) {
+  const id = `showcase_select_id_${props.name};`;
   return (
     <div className={styles.selectContainer}>
       <label htmlFor={id}>{label}</label>
-      <select id={id} name={tag} onChange={onChange} value={value}>
-        {children}
+      <select id={id} {...props}>
+        {props.children}
       </select>
     </div>
   );