Merge branch 'main' into feature/mark-chit/credits

web/.eslintrc.json

@@ -1,12 +1,15 @@
 {
-  "root": true,
-  "plugins": ["react"],
-  "extends": ["portsoc-ts", "plugin:react/recommended"],
-  "env": {
-    "browser": true
-  },
-  "rules": {
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "react/react-in-jsx-scope": "off"
-  }
+	"root": true,
+	"plugins": ["react"],
+	"extends": ["portsoc-ts", "plugin:react/recommended"],
+	"env": {
+		"browser": true
+	},
+	"rules": {
+		"@typescript-eslint/explicit-module-boundary-types": "off",
+		"@typescript-eslint/indent": "off",
+		"@typescript-eslint/member-delimiter-style": "off",
+		"react/react-in-jsx-scope": "off",
+		"no-tabs": "off"
+	}
 }

web/.prettierrc.json

@@ -0,0 +1,14 @@
+{
+	"trailingComma": "all",
+	"printWidth": 120,
+	"tabWidth": 4,
+	"semi": true,
+	"singleQuote": true,
+	"jsxSingleQuote": true,
+	"singleAttributePerLine": false,
+	"endOfLine": "lf",
+	"arrowParens": "always",
+	"useTabs": true,
+	"bracketSameLine": true,
+	"quoteProps": "as-needed"
+}

web/src/App.tsx

@@ -1,30 +1,30 @@
 import './App.css';
 
-import reactLogo from './assets/react.svg';
 import IncrementButton from './IncrementButton';
+import reactLogo from './assets/react.svg';
 
 function App() {
-  return (
-    <div className='App'>
-      <div>
-        <a href='https://vitejs.dev' target='_blank' rel='noreferrer'>
-          <img src='/vite.svg' className='logo' alt='Vite logo' />
-        </a>
-        <a href='https://reactjs.org' target='_blank' rel='noreferrer'>
-          <img src={reactLogo} className='logo react' alt='React logo' />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <IncrementButton incrementBy={1} />
-        <IncrementButton incrementBy={2} />
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
-    </div>
-  );
+	return (
+		<div className='App'>
+			<div>
+				<a href='https://vitejs.dev' target='_blank' rel='noreferrer'>
+					<img src='/vite.svg' className='logo' alt='Vite logo' />
+				</a>
+				<a href='https://reactjs.org' target='_blank' rel='noreferrer'>
+					<img src={reactLogo} className='logo react' alt='React logo' />
+				</a>
+			</div>
+			<h1>Vite + React</h1>
+			<div className='card'>
+				<IncrementButton incrementBy={1} />
+				<IncrementButton incrementBy={2} />
+				<p>
+					Edit <code>src/App.tsx</code> and save to test HMR
+				</p>
+			</div>
+			<p className='read-the-docs'>Click on the Vite and React logos to learn more</p>
+		</div>
+	);
 }
 
 export default App;

web/src/IncrementButton.tsx

@@ -1,20 +1,19 @@
 import { useState } from 'react';
 
 type ComponentProps = {
-  incrementBy: number,
-}
+	incrementBy: number;
+};
 
 function IncrementButton(props: ComponentProps) {
-  const [count, setCount] = useState(0);
+	const [count, setCount] = useState(0);
 
-  return (
-    <div>
-      <button onClick={() => setCount(() => count + props.incrementBy)}>
-            This button increments by {props.incrementBy}.
-            count is {count}
-      </button>
-    </div>
-  );
+	return (
+		<div>
+			<button onClick={() => setCount(() => count + props.incrementBy)}>
+				This button increments by {props.incrementBy}. count is {count}
+			</button>
+		</div>
+	);
 }
 
 export default IncrementButton;

web/src/main.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
 );