Test custom design for sign in page (#204)

* add sign in page

* implement logic

* pr fix

* add necessary line break

* add sign in page

* implement logic

* Add basic header

* add custom styling to sign in page states

* Update eslint rules

* Update eslint.config.js

* add sign in page

* Add basic header

* fix lint errors

* pr fixes

* rebase fixes

* revert to base state

* sort imports

* sorted imports

---------

Co-authored-by: Gokhan Sari <gokhan@sari.me>

frontend/eslint.config.js

@@ -1,3 +1,4 @@
+import stylisticTs from "@stylistic/eslint-plugin-ts";
 import pluginImport from "eslint-plugin-import";
 import jsxA11y from "eslint-plugin-jsx-a11y";
 import pluginReact from "eslint-plugin-react";
@@ -17,6 +18,7 @@ export default [
   {
     rules: {
       "arrow-parens": "error",
+      "comma-dangle": ["error", "always-multiline"],
       "eol-last": ["error"],
       eqeqeq: ["error"],
       "max-len": ["error", { code: 140, ignoreStrings: true }],
@@ -28,17 +30,15 @@ export default [
       "prefer-destructuring": ["error"],
       "quote-props": ["error", "as-needed"],
       quotes: ["error", "double", { allowTemplateLiterals: true }],
+      semi: ["error", "always"],
+      "semi-style": ["error", "last"],
       "sort-keys": "error",
     },
   },
 
   // import
   {
     ...pluginImport.flatConfigs.recommended,
-    rules: {
-      "import/no-extraneous-dependencies": "error",
-      "import/no-unresolved": "error",
-    },
     settings: {
       "import/resolver": {
         typescript: {},
@@ -90,12 +90,21 @@ export default [
   },
 
   // typescript
+  ...typescriptEslint.configs.recommended,
   {
-    ...typescriptEslint.configs.recommended[0],
-    languageOptions: {
-      parser: typescriptEslint.parser,
+    rules: {
+      "@typescript-eslint/consistent-type-definitions": ["error", "type"],
+      "@typescript-eslint/no-explicit-any": 0,
+    },
+  },
+
+  {
+    plugins: {
+      "@stylistic/ts": stylisticTs,
+    },
+    rules: {
+      "@stylistic/ts/member-delimiter-style": ["error"],
     },
-    rules: {},
   },
 
   // typescript-sort-keys

frontend/package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
+    "@stylistic/eslint-plugin-ts": "^2.10.1",
     "@types/express": "^5.0.0",
     "@types/node": "^22.7.7",
     "@types/react": "^18.3.11",

frontend/src/components/ActivityOverlay/index.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { JSX, PropsWithoutRef } from "react";
 import styles from "./ActivityOverlay.module.css";
 
-type ActivityOverlayProps = Overwrite<PropsWithoutRef<JSX.IntrinsicElements["div"]>, {
+export type ActivityOverlayProps = Overwrite<PropsWithoutRef<JSX.IntrinsicElements["div"]>, {
   isActive: boolean;
 }>
 

frontend/src/components/App/index.tsx

@@ -2,16 +2,13 @@ import { Route, Switch } from "wouter";
 import "../../styles/style.css";
 import Bootstrap from "~/components/Bootstrap";
 import Error from "~/components/Error";
-import Header from "~/components/Header";
 import Home from "~/components/Home";
 import Manifesto from "~/components/Manifesto";
 import SignIn from "~/components/SignIn";
 
 export default function App() {
   return (
     <>
-      <Header />
-
       <Switch>
         <Route component={Bootstrap} path="/bootstrap" />
         <Route component={Home} path="/" />

frontend/src/components/Collapse/index.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { JSX, PropsWithoutRef, useEffect, useRef, useState } from "react";
 import styles from "./Collapse.module.css";
 
-type CollapseProps = Overwrite<PropsWithoutRef<JSX.IntrinsicElements["div"]>, {
+export type CollapseProps = Overwrite<PropsWithoutRef<JSX.IntrinsicElements["div"]>, {
   open: boolean;
   resolution?: "lg";
 }>;