setup auto lint

.github/workflows/ci.yml

@@ -0,0 +1,26 @@
+name: CI
+on: 
+  pull_request:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  ci:
+    name: Lint on Update
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Setup node 
+        uses: actions/setup-node@v3
+        with:
+          node-version: "20.x"
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint

package.json

@@ -11,10 +11,17 @@
   "license": "MIT",
   "scripts": {
     "prepare": "panda codegen",
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "type-check": "tsc",
+    "vite-build": "vite build",
+    "dev": "vite dev",
+    "build": "run-s type-check vite-build",
     "preview": "vite preview",
+    "lint": "run-p type-check lint:*",
+    "lint:eslint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:prettier": "prettier --check --loglevel warn src/**/*.{ts,tsx}",
+    "fix": "run-s fix:*",
+    "fix:eslint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 --fix",
+    "fix:prettier": "prettier --check --loglevel warn src/**/*.{ts,tsx} --write",
     "i18n-extract": "i18next src/**/*.tsx --config i18next-parser.config.js"
   },
   "dependencies": {
@@ -42,7 +49,6 @@
   "devDependencies": {
     "@pandacss/dev": "^0.14.0",
     "@shadow-panda/preset": "^0.6.0",
-    "@shadow-panda/styled-system": "./node_modules/@shadow-panda/styled-system",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -52,6 +58,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
     "i18next-parser": "^8.7.0",
+    "npm-run-all2": "^6.1.0",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
     "vite-plugin-pwa": "^0.16.5"

src/components/AppAvatar.tsx

@@ -11,7 +11,7 @@ type AppAvatarProps = {
 export const AppAvatar: React.FC<AppAvatarProps> = ({ imgSrc, alt = "avatar", size = "sm" }) => (
   <Avatar className={avatar({ size })}>
     <AvatarImage src={imgSrc} alt={alt} />
-    <AvatarFallback className={css({color: "avatar-fallback"})}>
+    <AvatarFallback className={css({ color: "avatar-fallback" })}>
       <UserCircle2 />
     </AvatarFallback>
   </Avatar>

src/components/HeaderMenu.tsx

@@ -66,7 +66,7 @@ const HeaderMenuBody: React.FC<HeaderMenuBodyProps> = ({ myData }) => {
                 textOverflow: "ellipsis",
               })}
             >
-              { myName }
+              {myName}
             </div>
           </Trans>
         </DropdownMenuLabel>

src/components/StatusDetailsView.tsx

@@ -49,7 +49,7 @@ type StatusDetailsViewProps = {
 export const StatusDetailsView: React.FC<StatusDetailsViewProps> = ({ status }) => {
   const availableCategories = userStatusCategories.filter((cat) => status[cat] !== undefined);
 
-  const {t} = useTranslation();
+  const { t } = useTranslation();
 
   return (
     <div className={css({ w: "95vw", maxW: "800px" })}>

src/global.d.ts

@@ -9,6 +9,6 @@ declare global {
 
     nostrZap: {
       initTarget: (targetEl: HTMLElement) => void;
-    }
+    };
   }
 }

src/states/nostr.ts

@@ -44,13 +44,13 @@ const myPubkeyAtom = atom((get) => {
 });
 
 // temporarily mask my pubkey. used to cause hard reload
-const isMyPubkeyMaskedAtom = atom(false)
+const isMyPubkeyMaskedAtom = atom(false);
 const maskedMyPubkeyAtom = atom((get) => {
   if (get(isMyPubkeyMaskedAtom)) {
-    return undefined
+    return undefined;
   }
-  return get(myPubkeyAtom)
-})
+  return get(myPubkeyAtom);
+});
 
 export const useMyPubkey = () => {
   return useAtomValue(myPubkeyAtom);
@@ -94,7 +94,7 @@ export const useHardReload = () => {
   }, [setIsPubkeyMasked]);
 
   return hardReload;
-}
+};
 
 const ACCT_DATA_CACHE_KEY = "nostr_my_data";
 const ACCT_DATA_CACHE_TTL = 12 * 60 * 60; // 12 hour
@@ -612,7 +612,10 @@ const getStatusesCache = (myPubkey: string, followings: string[]): [StatusesCach
         cacheMissPubkeys.push(pubkey);
       }
     }
-    return [{ statuses: cachedStatuses, latestUpdateTime: cache.latestUpdateTime, myPubkey: cache.myPubkey }, cacheMissPubkeys];
+    return [
+      { statuses: cachedStatuses, latestUpdateTime: cache.latestUpdateTime, myPubkey: cache.myPubkey },
+      cacheMissPubkeys,
+    ];
   } catch (err) {
     console.error(err);
     return [undefined, followings];

src/states/theme.ts

@@ -6,9 +6,9 @@ export type ColorTheme = "light" | "dark";
 
 const getSystemTheme = () => (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
 const getInitialTheme = (): ColorTheme => {
-  const theme = localStorage.getItem("color-theme")
-  return theme !== null ? JSON.parse(theme) as ColorTheme : getSystemTheme()
-}
+  const theme = localStorage.getItem("color-theme");
+  return theme !== null ? (JSON.parse(theme) as ColorTheme) : getSystemTheme();
+};
 
 // "manually" get value from localStorage on initializing atom value
 // to prevent the app view from flickering if system theme and theme stored in the storage differ.

src/styles/recipes.ts

@@ -34,7 +34,7 @@ export const button = cva({
       primary: {
         color: {
           base: "primary.foreground",
-          _disabled: "primary.muted.fg"
+          _disabled: "primary.muted.fg",
         },
         bg: {
           base: "primary",
@@ -46,7 +46,7 @@ export const button = cva({
       destructive: {
         color: {
           base: "destructive.foreground",
-          _disabled: "destructive.muted.fg"
+          _disabled: "destructive.muted.fg",
         },
         bg: {
           base: "destructive",
@@ -76,23 +76,23 @@ export const menuItem = cva({
   variants: {
     color: {
       default: {
-        color: "foreground"
+        color: "foreground",
       },
       primary: {
         color: {
           base: "primary",
-          _dark: "purple.400"
-        }
+          _dark: "purple.400",
+        },
       },
       destructive: {
         color: {
           base: "destructive",
-          _dark: "red.400"
-        }
+          _dark: "red.400",
+        },
       },
-    }
+    },
   },
   defaultVariants: {
-    color: "default"
-  }
-})
+    color: "default",
+  },
+});