setup turbo; make lint and build work

.gitignore

@@ -3,6 +3,10 @@ node_modules
 dist
 build
 public/build
+.next
+
+## Monorepo
+.turbo
 
 # Environment variables
 .env

.npmrc

@@ -0,0 +1 @@
+auto-install-peers = true

README.md

@@ -73,3 +73,4 @@ pnpm develop:remix
 - https://github.com/storybookjs/storybook
 - https://storybook.js.org/tutorials/design-systems-for-developers/react/en/architecture/
 - https://turbo.build/repo/docs/getting-started/existing-monorepo
+- https://github.com/vercel/style-guide/tree/canary

apps/docs/.eslintrc.cjs

@@ -1,18 +1,4 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: [
-    '@repo/eslint-config/base',
-    '@repo/eslint-config/react',
-    'plugin:storybook/recommended',
-  ],
-  overrides: [
-    {
-      files: ['*.stories.tsx'],
-      rules: {
-        // For some reason it shows errors for imports from @repo/ui, even though they are resolved correctly.
-        // Both develop and build work fine, so I'm disabling it for now.
-        'import/no-unresolved': 'off',
-      },
-    },
-  ],
+  extends: ['@repo/eslint-config/storybook'],
 }

apps/docs/package.json

@@ -6,7 +6,7 @@
     "build": "storybook build -o build",
     "start": "serve build",
     "clean": "rm -rf .turbo && rm -rf node_modules",
-    "lint": "eslint ./stories/*.stories.tsx --max-warnings 0"
+    "lint": "eslint ."
   },
   "dependencies": {
     "@repo/ui": "workspace:*",

apps/docs/tsconfig.json

@@ -1,18 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "allowJs": true,
-    "declaration": false,
-    "declarationMap": false,
-    "incremental": true,
-    "jsx": "preserve",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "target": "es5",
-    "skipLibCheck": true
-  },
+  "extends": "@repo/tsconfig/react-app.json",
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"]
 }

apps/docs/turbo.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "pipeline": {
+    "build": {
+      "outputs": ["build/**"]
+    }
+  }
+}

apps/nestjs/.eslintrc.js

@@ -1,22 +1,4 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@repo/eslint-config/base'],
-  env: {
-    node: true,
-  },
-  settings: {
-    'import/resolver': {
-      typescript: {
-        project: 'apps/nestjs/tsconfig.json',
-      },
-    },
-  },
-  overrides: [
-    {
-      files: ['jest.config.js', 'jest-e2e.config.js'],
-      rules: {
-        '@typescript-eslint/no-var-requires': 'off',
-      },
-    },
-  ],
+  extends: ['@repo/eslint-config/nest'],
 }

apps/nestjs/turbo.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "pipeline": {
+    "build": {
+      "outputs": ["build/**"]
+    }
+  }
+}

apps/remix/.eslintrc.cjs

@@ -1,11 +1,4 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['@repo/eslint-config/base', '@repo/eslint-config/react'],
-  settings: {
-    'import/resolver': {
-      typescript: {
-        project: 'apps/remix/tsconfig.json',
-      },
-    },
-  },
+  extends: ['@repo/eslint-config/remix'],
 }

apps/remix/app/api/cats.api.ts

@@ -1,10 +1,16 @@
 import type { Cat } from '@repo/types'
-import axios from 'axios'
 
-const client = axios.create({
-  baseURL: process.env.API_URL || 'http://localhost:2222',
-})
+const BASE_URL = process.env.API_URL || 'http://localhost:2222'
 
-export const catsApi = {
-  getAll: () => client.get<Cat[]>('/cats'),
+interface CatsApi {
+  getAll: () => Promise<Cat[]>
+}
+
+export const catsApi: CatsApi = {
+  getAll: async () => {
+    const response = await fetch(`${BASE_URL}/cats`)
+    const data: unknown = await response.json()
+
+    return data as Cat[]
+  },
 }

apps/remix/app/entry.server.tsx

@@ -45,9 +45,9 @@ function handleBotRequest(
     let shellRendered = false
     const { pipe, abort } = renderToPipeableStream(
       <RemixServer
+        abortDelay={ABORT_DELAY}
         context={remixContext}
         url={request.url}
-        abortDelay={ABORT_DELAY}
       />,
       {
         onAllReady() {
@@ -95,9 +95,9 @@ function handleBrowserRequest(
     let shellRendered = false
     const { pipe, abort } = renderToPipeableStream(
       <RemixServer
+        abortDelay={ABORT_DELAY}
         context={remixContext}
         url={request.url}
-        abortDelay={ABORT_DELAY}
       />,
       {
         onShellReady() {

apps/remix/app/root.tsx

@@ -20,10 +20,10 @@ export const links: LinksFunction = () => [
 
 export default function App() {
   return (
-    <html lang="en" className="dark">
+    <html className="dark" lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
         <Meta />
         <Links />
       </head>

apps/remix/app/routes/_index.tsx

@@ -1,7 +1,6 @@
 import { json, type MetaFunction } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
-import { Button } from '@repo/ui'
-import { Card } from '@repo/ui/components/card'
+import { Button, Card } from '@repo/ui'
 
 import { catsApi } from '~/api/cats.api'
 
@@ -14,9 +13,9 @@ export const meta: MetaFunction = () => {
 
 export const loader = async () => {
   try {
-    const { data: cats } = await catsApi.getAll()
+    const cats = await catsApi.getAll()
     return json({ cats })
-  } catch (error) {
+  } catch (error: any) {
     console.log(`Error fetching cats: ${error}`)
     return json({ cats: [] })
   }
@@ -32,7 +31,7 @@ export default function Index() {
       <h2>Cats fetched from NestJS</h2>
       <pre>{JSON.stringify(cats, null, 2)}</pre>
 
-      <Card title="Card component" href="#components">
+      <Card href="#components" title="Card component">
         Imported from internal @repo/ui package
       </Card>
 

apps/remix/package.json

@@ -6,25 +6,28 @@
   "scripts": {
     "build": "remix build",
     "develop": "remix dev --manual",
-    "start": "remix-serve ./build/index.js"
+    "start": "remix-serve ./build/index.js",
+    "lint": "eslint . ",
+    "lint:fix": "pnpm lint --fix",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@remix-run/css-bundle": "^2.3.1",
     "@remix-run/node": "^2.3.1",
     "@remix-run/react": "^2.3.1",
     "@remix-run/serve": "^2.3.1",
-    "@repo/ui": "workspace:^",
-    "axios": "^1.6.2",
+    "@repo/ui": "workspace:*",
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
-    "@repo/types": "workspace:*",
     "@remix-run/dev": "^2.3.1",
     "@remix-run/eslint-config": "^2.3.1",
-    "@repo/tailwind-config": "workspace:^",
+    "@repo/eslint-config": "workspace:*",
+    "@repo/tailwind-config": "workspace:*",
+    "@repo/tsconfig": "workspace:^",
+    "@repo/types": "workspace:*",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",

apps/remix/remix.config.js

@@ -5,5 +5,5 @@ export default {
   // Bundle UI lib, so that it's not necessary to include build step within the lib itself.
   // serverDependenciesToBundle: ['@repo/ui'],
   // Restart server when UI lib changes
-  watchPaths: ['../../libs/ui/**/*'],
+  // watchPaths: ['../../libs/ui/**/*'],
 }

apps/remix/tsconfig.json

@@ -1,20 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "@repo/tsconfig/remix.json",
+  "exclude": ["node_modules", "build"],
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "isolatedModules": true,
-    "jsx": "react-jsx",
-    "moduleResolution": "Bundler",
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "baseUrl": "./",
+    "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
-    },
-
-    // Remix takes care of building everything in `remix build`.
-    "noEmit": true
-  },
-  "exclude": ["node_modules", "build", "dist"]
+    }
+  }
 }

apps/remix/turbo.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "pipeline": {
+    "build": {
+      "outputs": ["build/**", "public/build/**"]
+    }
+  }
+}

libs/eslint-config/_base.js

@@ -0,0 +1,34 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  ignorePatterns: [
+    'node_modules/',
+    'dist/',
+    'build/',
+    'public/build/',
+    '.eslintrc.js',
+    '**/*.css',
+  ],
+  rules: {
+    'import/order': [
+      'error',
+      {
+        alphabetize: { caseInsensitive: true, order: 'asc' },
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
+        'newlines-between': 'always',
+      },
+    ],
+    'import/no-default-export': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+
+    // ⚠️
+    // Following rules are disabled during setup, but should probably be enabled later:
+
+    // Errors as unknown, etc.
+    '@typescript-eslint/no-explicit-any': 'off',
+
+    // Some weird type issues when calling `catsApi` in Remix index route
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+  },
+}