TypeScript for molecule components

package.json

@@ -21,7 +21,6 @@
     "@types/styled-components": "^5.1.19",
     "colord": "^2.9.2",
     "copy-text-to-clipboard": "^3.0.1",
-    "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-colorful": "^5.5.0",
     "react-dom": "^17.0.2",

src/components/molecules/ColorInputField.jsx → src/components/molecules/ColorInputField.tsx

@@ -1,9 +1,13 @@
 import styled from "styled-components";
-import PropTypes from "prop-types";
 import ColorTextInput from "../atoms/ColorTextInput";
 import ColorPicker from "../atoms/ColorPicker";
 import CopyButton from "../atoms/CopyButton";
 import FormatButton from "../atoms/FormatButton";
+import { Target } from "../../types/colors.types";
+
+type ColorInputFieldProps = {
+  target: Target;
+};
 
 const Container = styled.div`
   width: 100%;
@@ -19,7 +23,7 @@ const ButtonGroup = styled.div`
   display: flex;
 `;
 
-function ColorInputField({ target }) {
+function ColorInputField({ target }: ColorInputFieldProps) {
   return (
     <Container>
       <ColorTextInput target={target} />
@@ -33,8 +37,4 @@ function ColorInputField({ target }) {
   );
 }
 
-ColorInputField.propTypes = {
-  target: PropTypes.oneOf(["background", "foreground"]),
-};
-
 export default ColorInputField;

src/components/molecules/ColorSwatch.jsx → src/components/molecules/ColorSwatch.tsx

@@ -17,8 +17,8 @@ function ColorSwatch() {
   const { savedColors, setSavedColors } = useContext(SaveContext);
 
   // Load saved color. Every saved color stores a property called `key`, which is a timestamp
-  const handleLoad = (key) => {
-    const { background, foreground } = savedColors.find((color) => color.time === key);
+  const handleLoad = (key: number) => {
+    const { background, foreground } = savedColors.find((color) => color.time === key)!;
 
     // Do not update contrast in `updateBackground` and `updateForeground` since state update is async.
     updateBackground(background, false);
@@ -27,8 +27,8 @@ function ColorSwatch() {
   };
 
   // Delete saved color
-  const handleDelete = (key) => {
-    const color = savedColors.find((color) => color.time === key);
+  const handleDelete = (key: number) => {
+    const color = savedColors.find((color) => color.time === key)!;
     const index = savedColors.indexOf(color);
 
     // Remove the selected color object

src/components/molecules/InputLabel.jsx → src/components/molecules/InputLabel.tsx

@@ -1,8 +1,13 @@
 import styled from "styled-components";
-import PropTypes from "prop-types";
 import { MdInfoOutline } from "react-icons/md";
 import Tooltip from "../atoms/Tooltip";
 
+type InputLabelProps = {
+  labelFor: string;
+  title: string;
+  tooltipText: string;
+};
+
 const Container = styled.div`
   margin-bottom: 0.8rem;
   display: flex;
@@ -30,7 +35,7 @@ const tooltipWrapperStyles = {
   height: "1.8rem",
 };
 
-function InputLabel({ labelFor, title, tooltipText }) {
+function InputLabel({ labelFor, title, tooltipText }: InputLabelProps) {
   return (
     <Container>
       <Label htmlFor={labelFor}>{title}</Label>
@@ -41,17 +46,11 @@ function InputLabel({ labelFor, title, tooltipText }) {
           wrapperStyles={tooltipWrapperStyles}
           trigger="mouseenter focusin"
         >
-          <InfoIcon size={18} tabIndex="0" />
+          <InfoIcon size={18} tabIndex={0} />
         </Tooltip>
       ) : null}
     </Container>
   );
 }
 
-InputLabel.propTypes = {
-  labelFor: PropTypes.string,
-  title: PropTypes.string.isRequired,
-  tooltipText: PropTypes.string,
-};
-
 export default InputLabel;

src/components/molecules/PreviewText.tsx

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+type PreviewTextProps = {
+  children: string;
+  title: string;
+  largeText?: boolean;
+};
+
+const Container = styled.div<{ largeText: boolean }>`
+  margin-bottom: 4rem;
+  font-size: ${(props) => (props.largeText ? "18pt" : "16px")};
+`;
+
+const Text = styled.p`
+  color: var(--foreground);
+`;
+
+const Title = styled(Text)`
+  margin-bottom: 1.5rem;
+  font-weight: bold;
+`;
+
+function PreviewText({ children, title, largeText = false }: PreviewTextProps) {
+  return (
+    <Container largeText={largeText}>
+      <Title>{title}</Title>
+      <Text>{children}</Text>
+    </Container>
+  );
+}
+
+export default PreviewText;

src/components/molecules/WcagResults.jsx → src/components/molecules/WcagResults.tsx

@@ -9,7 +9,7 @@ export default function WcagResults() {
 
   const [aaNormal, aaLarge, aaaNormal, aaaLarge] = getWcagRatings(contrast);
 
-  // Table is styled in GlobalStyles.js for faster performance
+  // Table is styled in GlobalStyles.ts for faster performance
   return (
     <table>
       <thead>
@@ -18,7 +18,7 @@ export default function WcagResults() {
           <th>Normal Text</th>
           <th>
             <Tooltip content={<p>Text of ≥18pt or ≥14pt if bold</p>} placement="bottom" trigger="mouseenter focusin">
-              <p tabIndex="0">Large Text</p>
+              <p tabIndex={0}>Large Text</p>
             </Tooltip>
           </th>
         </tr>