Start fixing typescript issues with themeing.

Author: markrickert

@types/emotion.d.ts

@@ -0,0 +1,9 @@
+import '@emotion/react'
+
+import { Theme as EmotionTheme } from '../src/theme'
+
+export {}
+
+declare module '@emotion/react' {
+  export interface Theme extends EmotionTheme {}
+}

@types/index.d.ts

@@ -0,0 +1 @@
+export * from './emotion'

package.json

@@ -7,6 +7,7 @@
     "build": "EXTEND_ESLINT=true react-app-rewired build",
     "docker-test-e2e": "yarn start-and-wait && react-app-rewired test --watchAll=false --onlyChanged=false --testPathPattern='/__tests__/.*(\\.|).e2e.spec.(js|jsx|ts|tsx)?$'",
     "lint": "eslint . --cache --report-unused-disable-directives",
+    "typecheck": "tsc --noEmit",
     "prepare": "husky install",
     "start": "EXTEND_ESLINT=true react-app-rewired start",
     "start-and-wait": "yarn start & wget --retry-connrefused --waitretry=1 --read-timeout=20 --timeout=15 -t 30 http://localhost:3000/",
@@ -15,8 +16,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.0.3",
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
     "antd": "5.2.3",
     "date-fns": "^2.29.3",
     "framer-motion": "^2.9.5",
@@ -35,13 +36,14 @@
     "use-persisted-state": "^0.3.3"
   },
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/eslint-plugin": "^11.10.0",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/eslint-plugin": "^11.11.0",
     "@jest/globals": "^29.7.0",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.12",
+    "@types/markdown-to-jsx": "^7.0.1",
     "@types/node": "^20.11.16",
-    "@types/react": "^18.2.52",
+    "@types/react": "18.2.0",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.2.18",
     "@types/use-persisted-state": "^0.3.4",
@@ -73,7 +75,7 @@
     ]
   },
   "eslintConfig": {
-    "parser": "@babel/eslint-parser",
+    "parser": "@typescript-eslint/parser",
     "extends": [
       "react-app"
     ],

src/components/common/BinaryDownload.tsx

@@ -1,14 +1,21 @@
 import React from 'react'
 import { Button, Popover as AntdPopover, Tooltip } from 'antd'
+import type { PopoverProps as AntdPopoverProps } from 'antd'
 import styled from '@emotion/styled'
 import DownloadFileButton from './DownloadFileButton'
 import { removeAppPathPrefix } from '../../utils'
+import type { Theme } from '../../theme'
 
 const Container = styled.div`
   padding-right: 10px;
 `
 
-const BinaryRow = styled.div`
+interface BinaryRowProps {
+  index: number
+  theme?: Theme
+}
+
+const BinaryRow = styled.div<BinaryRowProps>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -22,16 +29,30 @@ const BinaryRow = styled.div`
   padding: 10px 15px;
   border-bottom: 1px solid ${({ theme }) => theme.border};
 `
-
-const Popover = styled(({ className, ...props }) => (
+interface PopoverProps extends Omit<AntdPopoverProps, 'overlayClassName'> {
+  className?: string
+}
+const Popover = styled(({ className, ...props }: PopoverProps) => (
   <AntdPopover overlayClassName={className} {...props} />
 ))`
   .ant-popover-inner-content {
     padding: 0;
   }
 `
 
-const BinaryList = ({ binaryFiles, toVersion, appName, packageName }) =>
+interface BinaryListProps {
+  binaryFiles: { newPath: string }[]
+  toVersion: string
+  appName: string
+  packageName: string
+}
+
+const BinaryList = ({
+  binaryFiles,
+  toVersion,
+  appName,
+  packageName,
+}: BinaryListProps) =>
   binaryFiles.map(({ newPath }, index) => {
     return (
       <BinaryRow key={index} index={index}>
@@ -46,14 +67,20 @@ const BinaryList = ({ binaryFiles, toVersion, appName, packageName }) =>
       </BinaryRow>
     )
   })
-
+interface BinaryDownloadProps {
+  diff: any[]
+  fromVersion: string
+  toVersion: string
+  appName: string
+  packageName: string
+}
 const BinaryDownload = ({
   diff,
   fromVersion,
   toVersion,
   appName,
   packageName,
-}) => {
+}: BinaryDownloadProps) => {
   const binaryFiles = diff.filter(
     ({ hunks, type }) => hunks.length === 0 && type !== 'delete'
   )

src/components/common/CompletedFilesCounter.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import { keyframes, css } from '@emotion/react'
 import Confetti from 'react-dom-confetti'
 import { Popover } from 'antd'
+import type { Theme } from '../../theme'
 
 const shake = keyframes`
   0% {
@@ -32,6 +33,7 @@ interface CompletedFilesCounterProps
   total: number
   popoverContent: string
   popoverCursorType: string
+  theme: Theme
 }
 
 const CompletedFilesCounter = styled(

src/components/common/Diff/Diff.tsx

@@ -10,13 +10,14 @@ import {
 import DiffHeader from './DiffHeader'
 import { getComments } from './DiffComment'
 import { replaceAppDetails } from '../../../utils'
+import type { Theme } from '../../../theme'
 
 const copyPathPopoverContentOpts = {
   default: 'Click to copy file path',
   copied: 'File path copied!',
 }
 
-const Container = styled.div`
+const Container = styled.div<{ theme?: Theme }>`
   border: 1px solid ${({ theme }) => theme.border};
   border-radius: 3px;
   margin-bottom: 16px;

src/components/common/Diff/DiffComment.tsx

@@ -1,30 +1,38 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
-import { motion } from 'framer-motion'
+import { HTMLMotionProps, motion } from 'framer-motion'
 import { removeAppPathPrefix, getVersionsContentInDiff } from '../../../utils'
 import Markdown from '../Markdown'
+import type { Theme } from '../../../theme'
+interface ContainerProps extends HTMLMotionProps<'div'> {
+  isCommentOpen: boolean
+  lineChangeType: 'add' | 'delete'
+  theme?: Theme
+}
 
-const Container = styled(({ isCommentOpen, children, ...props }) => {
-  return (
-    <motion.div
-      {...props}
-      variants={{
-        open: {
-          height: 'auto',
-        },
-        hidden: { height: 10 },
-      }}
-      initial={isCommentOpen ? 'open' : 'hidden'}
-      animate={isCommentOpen ? 'open' : 'hidden'}
-      transition={{
-        duration: 0.5,
-      }}
-      inherit={false}
-    >
-      <div children={children} />
-    </motion.div>
-  )
-})`
+const Container = styled(
+  ({ isCommentOpen, children, ...props }: ContainerProps) => {
+    return (
+      <motion.div
+        {...props}
+        variants={{
+          open: {
+            height: 'auto',
+          },
+          hidden: { height: 10 },
+        }}
+        initial={isCommentOpen ? 'open' : 'hidden'}
+        animate={isCommentOpen ? 'open' : 'hidden'}
+        transition={{
+          duration: 0.5,
+        }}
+        inherit={false}
+      >
+        <div children={children} />
+      </motion.div>
+    )
+  }
+)`
   overflow: hidden;
 
   & > div {
@@ -42,7 +50,10 @@ const Container = styled(({ isCommentOpen, children, ...props }) => {
   }
 `
 
-const ContentContainer = styled.div`
+interface ContentContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme?: Theme
+}
+const ContentContainer = styled.div<ContentContainerProps>`
   flex: 1;
   position: relative;
   padding: 16px;
@@ -51,7 +62,12 @@ const ContentContainer = styled.div`
   user-select: none;
 `
 
-const ShowButton = styled(({ isCommentOpen, ...props }) => (
+interface ShowButtonProps extends DivProps {
+  isCommentOpen: boolean
+  theme?: Theme
+}
+
+const ShowButton = styled(({ isCommentOpen, ...props }: ShowButtonProps) => (
   <motion.div
     {...props}
     variants={{
@@ -92,10 +108,25 @@ const LINE_CHANGE_TYPES = {
   NEUTRAL: 'N',
 }
 
-const getLineNumberWithType = ({ lineChangeType, lineNumber }) =>
-  `${LINE_CHANGE_TYPES[lineChangeType.toUpperCase()]}${lineNumber}`
-
-const getComments = ({ packageName, newPath, fromVersion, toVersion }) => {
+const getLineNumberWithType = ({
+  lineChangeType,
+  lineNumber,
+}: {
+  lineChangeType: 'add' | 'delete' | 'neutral'
+  lineNumber: number
+}) => `${LINE_CHANGE_TYPES[lineChangeType.toUpperCase()]}${lineNumber}`
+
+const getComments = ({
+  packageName,
+  newPath,
+  fromVersion,
+  toVersion,
+}: {
+  packageName: string
+  newPath: string
+  fromVersion: string
+  toVersion: string
+}) => {
   const newPathSanitized = removeAppPathPrefix(newPath)
 
   const versionsInDiff = getVersionsContentInDiff({

src/components/common/Diff/DiffCommentReminder.tsx

@@ -1,11 +1,24 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { motion } from 'framer-motion'
+import { motion, HTMLMotionProps } from 'framer-motion'
 import { InfoCircleOutlined } from '@ant-design/icons'
 import { getTransitionDuration } from '../../../utils'
+import type { Theme } from '../../../theme'
+
+interface DiffCommentReminderProps extends HTMLMotionProps<'div'> {
+  comments: Record<string, string>
+  isDiffCollapsed: boolean
+  uncollapseDiff: () => void
+  theme?: Theme
+}
 
 const DiffCommentReminder = styled(
-  ({ comments, isDiffCollapsed, uncollapseDiff, ...props }) => {
+  ({
+    comments,
+    isDiffCollapsed,
+    uncollapseDiff,
+    ...props
+  }: DiffCommentReminderProps) => {
     const numberOfComments = Object.keys(comments).length
     const isOpen = isDiffCollapsed && numberOfComments > 0
 
@@ -16,7 +29,7 @@ const DiffCommentReminder = styled(
           open: { opacity: 1, cursor: 'pointer' },
           closed: { opacity: 0, cursor: 'initial' },
         }}
-        animate={isOpen > 0 ? 'open' : 'closed'}
+        animate={isOpen ? 'open' : 'closed'}
         transition={{
           duration: getTransitionDuration(0.5),
         }}