fix: lint

apps/api/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@acme/api",
+  "name": "api",
   "version": "1.0.0",
   "files": [
     "dist"
@@ -28,7 +28,7 @@
   },
   "main": "dist/index.js",
   "dependencies": {
-    "@acme/shared": "workspace:*",
+    "utilities": "workspace:*",
     "@faker-js/faker": "^8.0.1",
     "express": "^4.18.2",
     "fastify": "^4.26.2",

apps/api/src/utils.ts

@@ -1,4 +1,4 @@
-import { iLikeTurtles } from '@acme/shared';
+import { iLikeTurtles } from 'utilities';
 import { faker } from '@faker-js/faker';
 import { type FastifyInstance, type FastifyRequest } from 'fastify';
 

apps/api/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from 'vite';
 import generatePackageJson from 'rollup-plugin-generate-package-json';
 import packageJson from './package.json' assert { type: 'json' };
 
-// NOTE: the @acme/shared package cannot be included into the deps casue it will attempt to be installed in
+// NOTE: the utilities package cannot be included into the deps casue it will attempt to be installed in
 // the firebase function build step and fail, so as a work around we are using a bundler to move the code into the final bundle that we ship to firebase
 
 // NOTE: we are using vite for bundling but "native" support for nodejs is not yet available

apps/web/.eslintrc.cjs

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["custom/react"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

apps/web/package.json

@@ -5,19 +5,21 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "deploy": "firebase deploy --only hosting",
     "clean": "rimraf node_modules dist"
   },
   "dependencies": {
-    "@acme/shared": "*",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "utilities": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
     "@vitejs/plugin-react": "^4.0.0",
+    "eslint": "^8.41.0",
     "vite": "^5.0.0"
   }
 }

apps/web/src/App.tsx

@@ -1,48 +1,51 @@
 import { useEffect, useState } from 'react';
-import { iLikeTurtles } from '@acme/shared';
+import { iLikeTurtles } from 'utilities';
 
 import './App.css';
 
-function App() {
+const App = () => {
   const [data, setData] = useState({});
   useEffect(() => {
-    fetch('/api/test')
+    void fetch('/api/test')
       .then((res) => res.json())
-      .then((res) => setData(res));
+      .then((res) => {
+        // TODO: we need a stronger contract with the backend
+        setData(res as Record<string, unknown>);
+      });
   }, []);
 
   return (
     <div className="App">
       <header className="header">
         <div className="icon-wrap">
-          <img className="icon-firebase" src="/firebase.svg" />
+          <img className="icon-firebase" src="/firebase.svg" alt="firebase" />
           <div className="icon-divider">+</div>
-          <img className="icon-turbo" src="/turborepo.svg" />
+          <img className="icon-turbo" src="/turborepo.svg" alt="turborepo" />
         </div>
         <div>
           <div style={{ textAlign: 'left' }}>
-            <p style={{ fontWeight: 'bold' }}>From apps/api (@acme/api)</p>
+            <p style={{ fontWeight: 'bold' }}>From apps/api (api)</p>
             <pre>{JSON.stringify(data, null, 2)}</pre>
           </div>
           <div style={{ textAlign: 'left' }}>
             <p style={{ fontWeight: 'bold' }}>
-              From packages/shared (@acme/shared)
+              From packages/shared (utilities)
             </p>
             <pre>{JSON.stringify(iLikeTurtles())}</pre>
           </div>
           <div style={{ textAlign: 'left' }}>
             <p style={{ fontWeight: 'bold' }}>Source code</p>
             <a
               style={{ color: 'lightblue' }}
-              href="https://github.com/Hacksore/turborepo-firebase-example"
+              href="https://github.com/yamcodes/turborepo-firebase-example"
             >
-              https://github.com/Hacksore/turborepo-firebase-example
+              https://github.com/yamcodes/turborepo-firebase-example
             </a>
           </div>
         </div>
       </header>
     </div>
   );
-}
+};
 
 export default App;

apps/web/src/main.tsx

@@ -1,10 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './app';
 import './index.css';
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
+const container = document.getElementById('root');
+
+if (!container) throw new Error('Failed to find the root element');
+
+createRoot(container).render(
+  <StrictMode>
     <App />
-  </React.StrictMode>
+  </StrictMode>
 );

apps/web/tsconfig.json

@@ -1,21 +1,14 @@
 {
   "compilerOptions": {
-    "target": "ESNext",
-    "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "allowJs": false,
-    "skipLibCheck": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx"
+    "paths": {
+      "react": ["./node_modules/@types/react"],
+      "react-dom": ["./node_modules/@types/react-dom"],
+      "react/jsx-runtime": ["./node_modules/@types/react/jsx-runtime"],
+      "@/*": ["./src/*"]
+    }
   },
-  "include": ["src"],
+  "extends": "tsconfig/react.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

apps/web/tsconfig.node.json

@@ -1,8 +1,11 @@
 {
   "compilerOptions": {
     "composite": true,
-    "module": "esnext",
-    "moduleResolution": "node"
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", ".eslintrc.cjs"]
 }

packages/tsconfig/base.json

@@ -16,7 +16,8 @@
     "skipLibCheck": true,
     "strict": true,
     "noUncheckedIndexedAccess": true,
-    "noImplicitAny": true
+    "noImplicitAny": true,
+    "noEmit": true
   },
   "exclude": ["node_modules"]
 }

packages/utilities/.eslintrc.cjs

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['custom/node'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true,
+  },
+};

packages/shared/package.json → packages/utilities/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@acme/shared",
+  "name": "utilities",
   "version": "0.0.0",
   "private": true,
   "type": "module",

packages/utilities/src/index.ts

@@ -0,0 +1 @@
+export * from './i-like-turtles';

packages/utilities/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "tsconfig/base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}