feat: automatically run unit tests on new PRs (#27) (#29)

fix: wrong types

fix: typescript compile errors

feat: run lint on new PRs

type node

.

Author: compojoom

.github/workflows/lint.yml

@@ -0,0 +1,32 @@
+name: Run Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the code
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # Set up Node.js
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+
+      # Install dependencies
+      - name: Install dependencies
+        run: npm ci
+
+      # Run tests with coverage
+      - name: Run lint
+        run: |
+          npm run lint

package-lock.json

@@ -21,7 +21,7 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage --collectCoverageFrom=\"./src/**\"",
     "test:snapshots": "jest -u",
-    "lint": "npm run eslint",
+    "lint": "tsc && npm run eslint",
     "eslint": "eslint src/* app/*",
     "eslint:fix": "npm run lint -- --fix",
     "prettier": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\"",
@@ -96,6 +96,7 @@
     "@types/eslint__js": "^8.42.3",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.13",
+    "@types/node": "^22.9.1",
     "@types/react": "~18.3.12",
     "babel-loader": "^8.4.1",
     "detox": "^20.27.6",

package.json

@@ -19,9 +19,7 @@ export default {
 export const Default = () => (
   <DataRow>
     <DataRow.Label>Send</DataRow.Label>
-    <DataRow.Value>
-      <Text>0.05452 ETH</Text>
-    </DataRow.Value>
+    <DataRow.Value>0.05452 ETH</DataRow.Value>
   </DataRow>
 )
 

src/components/DataRow/index.stories.tsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import { XStack, Text, Theme, XStackProps } from 'tamagui'
 
-interface Props {
+type Props = {
   children: string
 }
 
+type ValueProps = {
+  children: string | React.ReactElement
+}
+
 export const DataRow: React.FC<XStackProps> & {
   Label: React.FC<Props>
-  Value: React.FC<Props>
+  Value: React.FC<ValueProps>
   Header: React.FC<Props>
 } = (props: XStackProps) => {
   const { children, ...rest } = props
@@ -24,7 +28,13 @@ const Label = ({ children }: Props) => (
   </Theme>
 )
 
-const Value = ({ children }: Props) => <Text>{children}</Text>
+const Value = ({ children }: { children: string | React.ReactElement }) => {
+  if (typeof children === 'string') {
+    return <Text>{children}</Text>
+  }
+
+  return children
+}
 
 const Header = ({ children }: Props) => (
   <Text fontWeight="600" marginVertical="$2">

src/components/DataRow/index.tsx

@@ -4,15 +4,15 @@ import { StyledTransactionsTabs, StyledTransactionTabItem, StyledTransactionTabT
 
 interface InlineTabProps {
   items: {
-    path: Href<string>
+    path: Href
     label: string
   }[]
 }
 
 function InlineTab({ items }: InlineTabProps) {
   const path = usePathname()
 
-  const onTabItemClick = (screenPath: Href<string>) => () => {
+  const onTabItemClick = (screenPath: Href) => () => {
     router.replace(screenPath)
   }
 

src/components/ExternalLink/index.tsx

@@ -5,7 +5,7 @@
     "paths": {
       "@/*": ["./*"]
     },
-    "types": ["jest"]
+    "types": ["jest", "node"]
   },
   "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
 }