more fun ci

.eslintrc.js

@@ -14,8 +14,30 @@ module.exports = {
     ecmaVersion: "latest",
     sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint"],
-  rules: {},
+  plugins: ["react", "@typescript-eslint", "import"],
+  rules: {
+    "import/no-duplicates": "error",
+    "import/order": [
+      "error",
+      {
+        groups: [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index",
+          "object",
+          "type",
+        ],
+        "newlines-between": "always",
+        alphabetize: {
+          order: "asc",
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
   globals: {
     fetch: "readonly",
     process: "readonly",

.github/workflows/ci.yml

@@ -14,6 +14,19 @@ jobs:
       - run: npm install
       - name: Run ESLint
         run: npm run lint
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm install
+      - name: Run Prettier
+        run: npm run format:check
   typecheck:
     name: Typecheck
     runs-on: ubuntu-latest

App.tsx

@@ -1,20 +1,20 @@
+import Ionicons from "@expo/vector-icons/Ionicons";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
-import { Text, View, Image, Button, StyleSheet } from "react-native";
-import Ionicons from "@expo/vector-icons/Ionicons";
-import { useState, useEffect } from "react";
+import { BlurView } from "expo-blur";
 import * as SecureStorage from "expo-secure-store";
-import AuthContext from "./src/auth";
+import { useState, useEffect } from "react";
+import { Text, View, Image, Button, StyleSheet } from "react-native";
 import { SWRConfig, useSWRConfig } from "swr";
-import { BlurView } from "expo-blur";
 
-import Login from "./src/pages/login";
+import AuthContext from "./src/auth";
+import { StackParamList, TabParamList } from "./src/lib/NavigatorParamList";
+import CardsPage from "./src/pages/cards";
 import Home from "./src/pages/index";
-import { palette, theme } from "./src/theme";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import Login from "./src/pages/login";
 import Organization from "./src/pages/organization";
-import CardsPage from "./src/pages/cards";
-import { StackParamList, TabParamList } from "./src/lib/NavigatorParamList";
+import { palette, theme } from "./src/theme";
 
 const Stack = createNativeStackNavigator<StackParamList>();
 const Tab = createBottomTabNavigator<TabParamList>();

package.json

@@ -6,7 +6,9 @@
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web",
-    "lint": "eslint src/",
+    "lint": "eslint App.tsx src/",
+    "format": "prettier . --write",
+    "format:check": "prettier . --check",
     "ts:check": "tsc"
   },
   "dependencies": {
@@ -38,7 +40,9 @@
     "@typescript-eslint/eslint-plugin": "^6.6.0",
     "@typescript-eslint/parser": "^6.6.0",
     "eslint": "^8.49.0",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-react": "^7.33.2",
+    "prettier": "^3.0.3",
     "typescript": "^5.2.2"
   },
   "private": true

src/components/PaymentCard.tsx

@@ -1,6 +1,7 @@
 import { Text, View, ViewProps } from "react-native";
-import { palette } from "../theme";
+
 import Card from "../lib/types/Card";
+import { palette } from "../theme";
 
 export default function PaymentCard({
   card,

src/components/Transaction.tsx

@@ -1,11 +1,12 @@
-import { View, Text } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { View, Text } from "react-native";
+
+import TransactionType from "../lib/types/Transaction";
 import { palette } from "../theme";
 import { renderMoney } from "../util";
-import TransactionType from "../lib/types/Transaction";
 
 function transactionIcon(
-  code: TransactionType["code"]
+  code: TransactionType["code"],
 ): React.ComponentProps<typeof Ionicons>["name"] {
   switch (code) {
     case "000":

src/lib/organization/useTransactions.ts

@@ -14,12 +14,12 @@ export default function useTransactions(orgId: string) {
       return `/organizations/${orgId}/transactions?limit=${PAGE_SIZE}&after=${
         previousPageData.data[previousPageData.data.length - 1].id
       }`;
-    }
+    },
   );
 
   const transactions = useMemo(
     () => data?.flatMap((d) => d.data) || [],
-    [data]
+    [data],
   );
   const isLoadingMore =
     isLoading || (size > 0 && data && typeof data[size - 1] === "undefined");

src/pages/cards.tsx

@@ -1,7 +1,8 @@
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import { FlatList } from "react-native";
-import PaymentCard from "../components/PaymentCard";
 import useSWR from "swr";
-import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+
+import PaymentCard from "../components/PaymentCard";
 
 export default function CardsPage() {
   const { data: cards } = useSWR("/user/cards");