Merge pull request #21 from fogbender/feat--add-eslint

feat: Add Eslint

.eslintignore

@@ -0,0 +1,6 @@
+/.astro
+dist
+.vscode
+.vercel
+src/db/migrations
+src/env.d.ts

.eslintrc.cjs

@@ -0,0 +1,66 @@
+module.exports = {
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:astro/recommended',
+		'plugin:typescript-sort-keys/recommended',
+	],
+	overrides: [
+		{
+			files: ['*.astro'],
+			parser: 'astro-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser',
+				extraFileExtensions: ['.astro'],
+			},
+			rules: {
+				'@typescript-eslint/no-unsafe-assignment': 'off',
+				'deprecation/deprecation': 'off',
+			},
+		},
+		{
+			extends: ['plugin:markdown/recommended'],
+			files: ['**/*.md'],
+			processor: 'markdown/markdown',
+		},
+	],
+	parser: '@typescript-eslint/parser',
+	parserOptions: {
+		project: true,
+		tsconfigRootDir: __dirname,
+	},
+	plugins: [
+		'@typescript-eslint',
+		'astro',
+		'deprecation',
+		'simple-import-sort',
+		'typescript-sort-keys',
+	],
+	root: true,
+	rules: {
+		'simple-import-sort/imports': 'error',
+		'no-empty-pattern': 'off',
+		'simple-import-sort/exports': 'error',
+		'deprecation/deprecation': 'error',
+
+		'@typescript-eslint/no-misused-promises': 'off',
+		'@typescript-eslint/no-floating-promises': 'off',
+		'@typescript-eslint/no-unsafe-return': 'off',
+		'@typescript-eslint/await-thenable': 'off',
+		'@typescript-eslint/restrict-template-expressions': 'off',
+		'@typescript-eslint/no-unsafe-call': 'off',
+		'@typescript-eslint/no-unsafe-member-access': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
+		'@typescript-eslint/no-unused-vars': 'off',
+		'@typescript-eslint/no-non-null-assertion': 'off',
+		'@typescript-eslint/no-empty-function': 'off',
+		'typescript-sort-keys/interface': 'off',
+
+		// Stylistic concerns that don't interfere with Prettier
+		'padding-line-between-statements': 'off',
+		'@typescript-eslint/padding-line-between-statements': [
+			'error',
+			{ blankLine: 'always', next: '*', prev: 'block-like' },
+		],
+	},
+};

.prettierignore

@@ -1,3 +1,4 @@
+/.astro
 dist
 .vscode
 .vercel

package.json

@@ -8,7 +8,10 @@
     "start": "astro dev",
     "build": "astro check && tsc --noEmit && astro build",
     "preview": "astro preview",
+    "lint": "eslint . --max-warnings 0 --report-unused-disable-directives",
     "fmt": "prettier --write --ignore-unknown .",
+    "fix": "yarn lint:fix; yarn fmt",
+    "lint:fix": "yarn lint --fix",
     "migrate": "tsx src/db/scripts/migrate",
     "astro": "astro"
   },
@@ -31,11 +34,19 @@
     "@types/jsonwebtoken": "^9.0.2",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.6",
+    "@typescript-eslint/parser": "^5.59.6",
     "astro": "^2.3.2",
     "clsx": "^1.2.1",
     "cookie": "^0.5.0",
     "drizzle-kit": "^0.17.6",
     "drizzle-orm": "^0.25.4",
+    "eslint": "^8.40.0",
+    "eslint-plugin-astro": "^0.27.0",
+    "eslint-plugin-deprecation": "^1.4.1",
+    "eslint-plugin-markdown": "^3.0.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "eslint-plugin-typescript-sort-keys": "^2.3.0",
     "fogbender-react": "^0.2.11",
     "js-cookie": "^3.0.5",
     "jsonwebtoken": "^9.0.0",

src/components/AuthSync.tsx

@@ -1,9 +1,10 @@
-import { useActiveOrg, useAuthInfo } from './propelauth';
-import { useMemo, useEffect } from 'react';
-import { trpc } from './trpc';
 import cookie from 'js-cookie';
+import { useEffect, useMemo } from 'react';
+
 import { AUTH_COOKIE_NAME } from '../constants';
 import { parseJwt } from './jwt';
+import { useActiveOrg, useAuthInfo } from './propelauth';
+import { trpc } from './trpc';
 
 export function AuthSync() {
 	// refresh_token is stored in secure cookie, so the only way to get access_token is to wait for propel auth to get new access_token from their backend
@@ -19,6 +20,7 @@ export function AuthSync() {
 				orgId,
 			};
 		}
+
 		return { isLoggedIn: undefined, accessToken: undefined, userId: undefined };
 	}, [auth, orgId]);
 
@@ -28,6 +30,7 @@ export function AuthSync() {
 			authMutation.mutate(params);
 			return;
 		}
+
 		if (params.isLoggedIn) {
 			// store new cookie to backend if new access_token is much fresher than the one in backend or userId doesn't match
 			const cookieValues = new URLSearchParams(cookie.get(AUTH_COOKIE_NAME) || '');
@@ -40,6 +43,7 @@ export function AuthSync() {
 				authMutation.mutate(params);
 				return;
 			}
+
 			const expFromCookie = cookieValues.get('exp');
 			const expFromCookieNumber = Number(expFromCookie) || 0;
 			console.log('expFromCookieNumber', jwtValues.exp - expFromCookieNumber);

src/components/Counter.tsx

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+
 import { trpc, TRPCProvider } from './trpc';
 
 export function Counter(props: React.ComponentProps<typeof CounterInteral>) {

src/components/Login.tsx

@@ -1,6 +1,5 @@
-import { AuthProvider, LoginManager } from './propelauth';
-
 import { env } from '../config';
+import { AuthProvider, LoginManager } from './propelauth';
 import { PropelAuthCSS } from './PropelAuthCSS';
 
 export function Login() {
@@ -15,6 +14,7 @@ export function LoginInternal() {
 	const redirectToYourProduct = () => {
 		window.location.href = '/app';
 	};
+
 	return (
 		<PropelAuthCSS>
 			<LoginManager

src/components/LoginPasswordless.tsx

@@ -1,6 +1,5 @@
-import { AuthProvider, LoginPasswordless } from './propelauth';
-
 import { env } from '../config';
+import { AuthProvider, LoginPasswordless } from './propelauth';
 import { PropelAuthCSS } from './PropelAuthCSS';
 
 export function Login() {

src/components/PropelAuthCSS.tsx

@@ -1,7 +1,8 @@
-import { createPortal } from 'react-dom';
+import { BaseElements } from '@propelauth/base-elements';
 import { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
 import { BetaComponentLibraryProvider } from './propelauth';
-import { BaseElements } from '@propelauth/base-elements';
 
 export function PropelAuthCSS({ children }: { children: React.ReactNode }) {
 	return (

src/components/Signup.tsx

@@ -1,12 +1,12 @@
-import { AuthProvider, Signup as SignupManager } from './propelauth';
-
 import { env } from '../config';
+import { AuthProvider, Signup as SignupManager } from './propelauth';
 import { PropelAuthCSS } from './PropelAuthCSS';
 
 export function Signup() {
 	const redirectToYourProduct = () => {
 		window.location.href = '/app';
 	};
+
 	return (
 		<AuthProvider authUrl={env.PUBLIC_AUTH_URL}>
 			<PropelAuthCSS>

src/components/app/App.tsx

@@ -1,19 +1,20 @@
+import type { OrgMemberInfo } from '@propelauth/javascript';
+import type { UseAuthInfoLoggedInProps } from '@propelauth/react/types/useAuthInfo';
+
+import { env } from '../../config';
+import { AuthSync } from '../AuthSync';
+import { SupportWidget } from '../fogbender/Support';
+import { LoginInternal } from '../Login';
 import {
 	AuthProvider,
+	saveOrgSelectionToLocalStorage,
 	useActiveOrg,
 	useAuthInfo,
-	saveOrgSelectionToLocalStorage,
 	useRedirectFunctions,
 } from '../propelauth';
-import type { OrgMemberInfo } from '@propelauth/javascript';
-import type { UseAuthInfoLoggedInProps } from '@propelauth/react/types/useAuthInfo';
-import { env } from '../../config';
 import { TRPCProvider } from '../trpc';
-import { AuthSync } from '../AuthSync';
-import { SupportWidget } from '../fogbender/Support';
-import { LoginInternal } from '../Login';
-import { AppNav } from './Nav';
 import { Layout } from './Layout';
+import { AppNav } from './Nav';
 
 export function App() {
 	return (
@@ -35,6 +36,7 @@ function AppInteral() {
 	if (auth.loading === true) {
 		return <div className="container my-10 mx-4">Loading...</div>;
 	}
+
 	if (auth.user === null) {
 		return (
 			<>
@@ -45,6 +47,7 @@ function AppInteral() {
 			</>
 		);
 	}
+
 	if (!activeOrg) {
 		const orgs = auth.orgHelper.getOrgs();
 		if (orgs.length === 0) {
@@ -64,6 +67,7 @@ function AppInteral() {
 				</>
 			);
 		}
+
 		return (
 			<>
 				<h1 className="text-2xl font-bold text-center">Please select an organization</h1>
@@ -88,6 +92,7 @@ function AppInteral() {
 			</>
 		);
 	}
+
 	return <AppWithOrg auth={auth} activeOrg={activeOrg} />;
 }
 

src/components/app/Nav.tsx

@@ -1,13 +1,14 @@
 import classNames from 'clsx';
-import { useState, useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { env } from '../../config';
+import { SupportWidget } from '../fogbender/Support';
 import {
 	requireActiveOrg,
 	saveOrgSelectionToLocalStorage,
 	useLogoutFunction,
 	useRedirectFunctions,
 } from '../propelauth';
-import { env } from '../../config';
-import { SupportWidget } from '../fogbender/Support';
 
 export function AppNav() {
 	const menuRef = useRef<HTMLDivElement>(null);
@@ -33,15 +34,18 @@ export function AppNav() {
 				setIsMenuOpen(false);
 			}
 		};
+
 		const handleEscape = (e: KeyboardEvent) => {
 			if (e.key === 'Escape') {
 				setIsMenuOpen(false);
 			}
 		};
+
 		if (isMenuOpen) {
 			document.addEventListener('click', closeMenu);
 			document.addEventListener('keydown', handleEscape);
 		}
+
 		return () => {
 			document.removeEventListener('click', closeMenu);
 			document.removeEventListener('keydown', handleEscape);

src/components/app/Prompts.tsx

@@ -1,12 +1,13 @@
 import { DehydratedState, useQueryClient } from '@tanstack/react-query';
 import { getQueryKey } from '@trpc/react-query';
+import { useReducer, useRef } from 'react';
+
 import { env } from '../../config';
-import { AuthProvider, requireActiveOrg } from '../propelauth';
-import { TRPCProvider, trpc } from '../trpc';
 import { AuthSync } from '../AuthSync';
-import { useReducer, useRef } from 'react';
-import { AppNav } from './Nav';
+import { AuthProvider, requireActiveOrg } from '../propelauth';
+import { trpc, TRPCProvider } from '../trpc';
 import { Layout } from './Layout';
+import { AppNav } from './Nav';
 
 export function Prompts(props: { dehydratedState: DehydratedState }) {
 	return (
@@ -40,7 +41,7 @@ function Interal() {
 		},
 	});
 	const runPromptMutation = trpc.prompts.runPrompt.useMutation();
-	const [showAddPrompt, toggleShowAddPrompt] = useReducer((state) => !state, !!!!!!!!!false);
+	const [showAddPrompt, toggleShowAddPrompt] = useReducer((state) => !state, !false);
 	const { activeOrg } = requireActiveOrg();
 	const orgId = activeOrg?.orgId || '';
 	const promptsQuery = trpc.prompts.getPrompts.useQuery(
@@ -97,6 +98,7 @@ function Interal() {
 										return;
 									}
 								}
+
 								addPromptMutation.mutate(
 									{ orgId, prompt, response },
 									{

src/components/app/Settings.tsx

@@ -1,10 +1,11 @@
 import { useQueryClient } from '@tanstack/react-query';
 import { getQueryKey } from '@trpc/react-query';
+import { useReducer } from 'react';
+
 import { env } from '../../config';
-import { AuthProvider, requireActiveOrg } from '../propelauth';
-import { TRPCProvider, trpc } from '../trpc';
 import { AuthSync } from '../AuthSync';
-import { useReducer } from 'react';
+import { AuthProvider, requireActiveOrg } from '../propelauth';
+import { trpc, TRPCProvider } from '../trpc';
 import { Layout } from './Layout';
 import { AppNav } from './Nav';