Update kitchen-sink example. (#6577)

Updating the kitchen-sink example!

Closes TURBO-1745

Things to pay attention to:

- [x] Is tasking correct? Are all tasks successful out-of-the-box? Do I
hit cache when I'm expecting?
- [x] If I add an unused variable in a workspace, do I see a warning in
both my editor and when I run turbo lint?
- [x] Does auto-importing work across packages?
- [x] Anything else wonky in your editor?
- [x] Do I get proper hot-reloading in turbo dev?
- [x] Anything else that may come up!

examples/kitchen-sink/README.md

@@ -22,10 +22,10 @@ This Turborepo includes the following packages and apps:
 - `storefront`: a [Next.js](https://nextjs.org/) app
 - `admin`: a [Vite](https://vitejs.dev/) single page app
 - `blog`: a [Remix](https://remix.run/) blog
-- `logger`: isomorphic logger (a small wrapper around console.log)
-- `ui`: a dummy React UI library (which contains a single `<CounterButton>` component)
+- `@repo/logger`: isomorphic logger (a small wrapper around console.log)
+- `@repo/ui`: a dummy React UI library (which contains a single `<CounterButton>` component)
 - `scripts`: Jest and ESLint configurations
-- `tsconfig`: tsconfig.json's used throughout the monorepo
+- `@repo/typescript-config`: tsconfig.json's used throughout the monorepo
 
 Each package and app is 100% [TypeScript](https://www.typescriptlang.org/).
 

examples/kitchen-sink/apps/admin/.eslintrc.js

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

examples/kitchen-sink/apps/admin/package.json

@@ -12,15 +12,15 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ui": "workspace:*"
+    "@repo/ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
-    "eslint-config-custom": "workspace:*",
-    "tsconfig": "workspace:*",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "typescript": "^5.3.2",
+    "vite": "^5.0.2"
   }
 }

examples/kitchen-sink/apps/admin/src/app/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { CounterButton, Link } from "ui";
 import "./styles.css";
+import { CounterButton, Link } from "@repo/ui";
 
 function App(): JSX.Element {
   return (

examples/kitchen-sink/apps/admin/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "exclude": ["node_modules"],
-  "extends": "tsconfig/vite.json",
+  "extends": "@repo/typescript-config/vite.json",
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "dist"

examples/kitchen-sink/apps/api/.eslintrc.js

@@ -1,3 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["custom/server"],
+  extends: ["@repo/eslint-config/server.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
 };

examples/kitchen-sink/apps/api/package.json

@@ -12,27 +12,28 @@
     "test": "jest --detectOpenHandles"
   },
   "jest": {
-    "preset": "jest-presets/jest/node"
+    "preset": "@repo/jest-presets/jest/node"
   },
   "dependencies": {
     "body-parser": "^1.20.2",
     "cors": "^2.8.5",
     "express": "^4.18.2",
-    "logger": "workspace:*",
+    "@repo/logger": "workspace:*",
     "morgan": "^1.10.0"
   },
   "devDependencies": {
-    "@types/body-parser": "^1.19.2",
-    "@types/cors": "^2.8.10",
-    "@types/express": "^4.17.17",
-    "@types/morgan": "^1.9.5",
-    "@types/node": "^20.5.9",
-    "@types/supertest": "^2.0.12",
-    "eslint-config-custom": "workspace:*",
-    "jest-presets": "workspace:*",
+    "@types/body-parser": "^1.19.5",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^4.17.21",
+    "@types/jest": "^29.5.10",
+    "@types/morgan": "^1.9.9",
+    "@types/node": "^20.10.0",
+    "@types/supertest": "^2.0.16",
+    "@repo/eslint-config": "workspace:*",
+    "@repo/jest-presets": "workspace:*",
     "supertest": "^6.3.3",
-    "tsconfig": "workspace:*",
-    "tsup": "^6.0.1",
-    "typescript": "^5.2.2"
+    "@repo/typescript-config": "workspace:*",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.2"
   }
 }

examples/kitchen-sink/apps/api/src/index.ts

@@ -1,4 +1,4 @@
-import { log } from "logger";
+import { log } from "@repo/logger";
 import { createServer } from "./server";
 
 const port = process.env.PORT || 5001;

examples/kitchen-sink/apps/api/tsconfig.json

@@ -1,10 +1,10 @@
 {
+  "extends": "@repo/typescript-config/base.json",
   "compilerOptions": {
     "lib": ["ES2015"],
     "module": "CommonJS",
     "outDir": "./dist",
   },
   "exclude": ["node_modules"],
-  "extends": "tsconfig/base.json",
   "include": ["."]
 }

examples/kitchen-sink/apps/blog/.eslintrc.js

@@ -1,3 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["custom/remix"],
+  extends: ["@repo/eslint-config/remix.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
 };

examples/kitchen-sink/apps/blog/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import { CounterButton, Link } from "ui";
+import { CounterButton, Link } from "@repo/ui";
 
 export default function Index(): JSX.Element {
   return (

examples/kitchen-sink/apps/blog/package.json

@@ -10,23 +10,23 @@
     "lint": "eslint app/"
   },
   "dependencies": {
-    "@remix-run/node": "^1.19.3",
-    "@remix-run/react": "^1.19.3",
-    "@remix-run/serve": "^1.19.3",
-    "@remix-run/server-runtime": "^1.19.3",
-    "@vercel/analytics": "^0.1.11",
+    "@remix-run/node": "^2.3.1",
+    "@remix-run/react": "^2.3.1",
+    "@remix-run/serve": "^2.3.1",
+    "@remix-run/server-runtime": "^2.3.1",
+    "@vercel/analytics": "^1.1.1",
     "@vercel/remix-entry-server": "^0.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ui": "workspace:*"
+    "@repo/ui": "workspace:*"
   },
   "devDependencies": {
-    "@remix-run/dev": "^1.19.3",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "eslint-config-custom": "workspace:*",
-    "tsconfig": "workspace:*",
-    "typescript": "^5.2.2"
+    "@remix-run/dev": "^2.3.1",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "typescript": "^5.3.2"
   },
   "engines": {
     "node": ">=18"

examples/kitchen-sink/apps/blog/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "exclude": ["node_modules", "build"],
-  "extends": "tsconfig/remix.json",
+  "extends": "@repo/typescript-config/remix.json",
   "compilerOptions": {
     "rootDir": "app",
     "outDir": "dist",

examples/kitchen-sink/apps/storefront/.eslintrc.js

@@ -1,3 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  extends: ["custom/next"],
+  extends: ["@repo/eslint-config/next.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
 };

examples/kitchen-sink/apps/storefront/package.json

@@ -11,19 +11,19 @@
     "start": "next start"
   },
   "dependencies": {
-    "logger": "workspace:*",
+    "@repo/logger": "workspace:*",
     "next": "^14.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "ui": "workspace:*"
+    "@repo/ui": "workspace:*"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.4.19",
-    "@types/node": "^17.0.12",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "eslint-config-custom": "workspace:*",
-    "tsconfig": "workspace:*",
-    "typescript": "^5.2.2"
+    "@next/eslint-plugin-next": "^14.0.3",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.38",
+    "@types/react-dom": "^18.2.17",
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "typescript": "^5.3.2"
   }
 }

examples/kitchen-sink/apps/storefront/src/app/page.tsx

@@ -1,5 +1,5 @@
-import { log } from "logger";
-import { CounterButton, Link } from "ui";
+import { log } from "@repo/logger";
+import { CounterButton, Link } from "@repo/ui";
 
 export const metadata = {
   title: "Store | Kitchen Sink",

examples/kitchen-sink/apps/storefront/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "exclude": ["node_modules"],
-  "extends": "tsconfig/nextjs.json",
+  "extends": "@repo/typescript-config/nextjs.json",
   "compilerOptions": {
     "outDir": "dist",
     "plugins": [

examples/kitchen-sink/package.json

@@ -1,20 +1,20 @@
 {
   "private": true,
   "scripts": {
-    "build": "turbo build",
-    "clean": "turbo clean",
-    "dev": "turbo dev --no-cache  --continue",
+    "build": "turbo run build",
+    "clean": "turbo run clean",
+    "dev": "turbo run dev",
     "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-    "lint": "turbo lint",
-    "test": "turbo test",
-    "typecheck": "turbo typecheck"
+    "lint": "turbo run lint",
+    "test": "turbo run test",
+    "typecheck": "turbo run typecheck"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.4",
-    "eslint": "^8.48.0",
-    "jest": "^29.6.4",
-    "prettier": "^2.7.1",
-    "turbo": "^1.9.3"
+    "prettier": "^3.1.0",
+    "turbo": "^1.10.16"
   },
-  "packageManager": "pnpm@8.9.0"
+  "packageManager": "pnpm@8.9.0",
+  "engines": {
+    "node": ">=18"
+  }
 }

examples/kitchen-sink/packages/config-eslint/index.js

@@ -0,0 +1,34 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["eslint:recommended", "prettier", "eslint-config-turbo"],
+  plugins: ["only-warn"],
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    node: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: [
+    // Ignore dotfiles
+    ".*.js",
+    "node_modules/",
+    "dist/",
+  ],
+  overrides: [
+    {
+      files: ["*.js?(x)", "*.ts?(x)"],
+    },
+  ],
+};

examples/kitchen-sink/packages/eslint-config-custom/next.js → examples/kitchen-sink/packages/config-eslint/next.js

@@ -27,6 +27,7 @@ module.exports = {
     React: true,
     JSX: true,
   },
+  plugins: ["only-warn"],
   settings: {
     "import/resolver": {
       typescript: {

examples/kitchen-sink/packages/config-eslint/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@repo/eslint-config",
+  "license": "MIT",
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@vercel/style-guide": "^5.1.0",
+    "eslint-config-turbo": "^1.10.16",
+    "eslint-plugin-mdx": "^2.2.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-storybook": "^0.6.15"
+  }
+}

examples/kitchen-sink/packages/eslint-config-custom/react.js → examples/kitchen-sink/packages/config-eslint/react.js

@@ -23,6 +23,7 @@ module.exports = {
   globals: {
     JSX: true,
   },
+  plugins: ["only-warn"],
   settings: {
     "import/resolver": {
       typescript: {

examples/kitchen-sink/packages/eslint-config-custom/remix.js → examples/kitchen-sink/packages/config-eslint/remix.js

@@ -24,6 +24,7 @@ module.exports = {
     browser: true,
     node: true,
   },
+  plugins: ["only-warn"],
   globals: {
     JSX: true,
   },

examples/kitchen-sink/packages/eslint-config-custom/server.js → examples/kitchen-sink/packages/config-eslint/server.js

@@ -23,6 +23,7 @@ module.exports = {
     node: true,
     es6: true,
   },
+  plugins: ["only-warn"],
   settings: {
     "import/resolver": {
       typescript: {

examples/kitchen-sink/packages/tsconfig/base.json → examples/kitchen-sink/packages/config-typescript/base.json

@@ -10,7 +10,8 @@
     "allowImportingTsExtensions": true,
     "inlineSources": false,
     "isolatedModules": true,
-    "moduleResolution": "node",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
     "noUnusedLocals": false,
     "noUnusedParameters": false,
     "preserveWatchOutput": true,

examples/kitchen-sink/packages/tsconfig/package.json → examples/kitchen-sink/packages/config-typescript/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tsconfig",
+  "name": "@repo/typescript-config",
   "version": "0.0.0",
   "private": true,
   "license": "MIT",