feat(examples): update tailwind lint

vercel · Aug 22, 2023 · 9d685ad · 9d685ad
1 parent e578188
commit 9d685ad
Show file tree

Hide file tree

Showing 25 changed files with 2,705 additions and 1,516 deletions.
diff --git a/examples/with-tailwind/.eslintrc.js b/examples/with-tailwind/.eslintrc.js
diff --git a/examples/with-tailwind/apps/docs/.eslintrc.js b/examples/with-tailwind/apps/docs/.eslintrc.js
@@ -1,4 +1,3 @@
 module.exports = {
-  root: true,
-  extends: ["custom"],
+  extends: ["custom/next"],
 };
diff --git a/examples/with-tailwind/apps/docs/package.json b/examples/with-tailwind/apps/docs/package.json
@@ -9,12 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^13.4.1",
+    "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ui": "workspace:*"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^13.4.19",
     "@types/node": "^18.11.17",
     "@types/react": "^18.2.5",
     "@types/react-dom": "^18.2.4",
@@ -24,6 +25,6 @@
     "tailwind-config": "workspace:*",
     "tailwindcss": "^3.2.4",
     "tsconfig": "workspace:*",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.6"
   }
 }
diff --git a/examples/with-tailwind/apps/docs/src/app/layout.tsx b/examples/with-tailwind/apps/docs/src/app/layout.tsx
@@ -6,9 +6,9 @@ export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
-}) {
+}): JSX.Element {
   return (
-    <html lang="en" className="bg-zinc-900">
+    <html className="bg-zinc-900" lang="en">
       <body>{children}</body>
     </html>
   );

diff --git a/examples/with-tailwind/apps/docs/src/app/page.tsx b/examples/with-tailwind/apps/docs/src/app/page.tsx
@@ -1,12 +1,11 @@
-import { Metadata } from "next";
-import Head from "next/head";
+import type { Metadata } from "next";
 import { Button } from "ui";
 
 export const metadata: Metadata = {
   title: "Docs - Turborepo Example",
 };
 
-export default function Home() {
+export default function Home(): JSX.Element {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
       <main className="mx-auto w-auto px-4 pt-16 pb-8 sm:pt-24 lg:px-8">

diff --git a/examples/with-tailwind/apps/web/.eslintrc.js b/examples/with-tailwind/apps/web/.eslintrc.js
@@ -1,4 +1,3 @@
 module.exports = {
-  root: true,
-  extends: ["custom"],
+  extends: ["custom/next"],
 };
diff --git a/examples/with-tailwind/apps/web/package.json b/examples/with-tailwind/apps/web/package.json
@@ -9,12 +9,13 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "^13.4.1",
+    "next": "^13.4.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ui": "workspace:*"
   },
   "devDependencies": {
+    "@next/eslint-plugin-next": "^13.4.19",
     "@types/node": "^18.11.17",
     "@types/react": "^18.2.5",
     "@types/react-dom": "^18.2.4",
@@ -24,6 +25,6 @@
     "tailwind-config": "workspace:*",
     "tailwindcss": "^3.2.4",
     "tsconfig": "workspace:*",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.6"
   }
 }
diff --git a/examples/with-tailwind/apps/web/src/app/layout.tsx b/examples/with-tailwind/apps/web/src/app/layout.tsx
@@ -6,9 +6,9 @@ export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
-}) {
+}): JSX.Element {
   return (
-    <html lang="en" className="bg-zinc-900">
+    <html className="bg-zinc-900" lang="en">
       <body>{children}</body>
     </html>
   );

diff --git a/examples/with-tailwind/apps/web/src/app/page.tsx b/examples/with-tailwind/apps/web/src/app/page.tsx
@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import { Button, Card } from "ui";
 
 const CARD_CONTENT = [
@@ -23,7 +23,7 @@ export const metadata: Metadata = {
   title: "Web - Turborepo Example",
 };
 
-export default function Home() {
+export default function Home(): JSX.Element {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center py-2">
       <main className="mx-auto w-auto px-4 pt-16 pb-8 sm:pt-24 lg:px-8">

diff --git a/examples/with-tailwind/package.json b/examples/with-tailwind/package.json
@@ -8,11 +8,11 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
-    "eslint": "^7.32.0",
-    "eslint-config-custom": "workspace:*",
-    "prettier": "^2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.11",
-    "turbo": "^1.9.3"
+    "eslint": "^8.47.0",
+    "prettier": "^3.0.2",
+    "prettier-plugin-tailwindcss": "^0.5.3",
+    "turbo": "^1.10.12",
+    "tsconfig": "workspace:*"
   },
   "packageManager": "pnpm@8.6.10"
 }
diff --git a/examples/with-tailwind/packages/eslint-config-custom/README.md b/examples/with-tailwind/packages/eslint-config-custom/README.md
@@ -0,0 +1,3 @@
+# `@turbo/eslint-config`
+
+Collection of internal eslint configurations.
diff --git a/examples/with-tailwind/packages/eslint-config-custom/index.js b/examples/with-tailwind/packages/eslint-config-custom/index.js
diff --git a/examples/with-tailwind/packages/eslint-config-custom/library.js b/examples/with-tailwind/packages/eslint-config-custom/library.js
@@ -0,0 +1,34 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/*
+ * This is a custom ESLint configuration for use with
+ * typescript packages.
+ *
+ * This config extends the Vercel Engineering Style Guide.
+ * For more information, see https://github.com/vercel/style-guide
+ *
+ */
+
+module.exports = {
+  extends: [
+    "@vercel/style-guide/eslint/node",
+    "@vercel/style-guide/eslint/typescript",
+  ].map(require.resolve),
+  parserOptions: {
+    project,
+  },
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: ["node_modules/", "dist/"],
+};
diff --git a/examples/with-tailwind/packages/eslint-config-custom/next.js b/examples/with-tailwind/packages/eslint-config-custom/next.js
@@ -0,0 +1,41 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/*
+ * This is a custom ESLint configuration for use with
+ * Next.js apps.
+ *
+ * This config extends the Vercel Engineering Style Guide.
+ * For more information, see https://github.com/vercel/style-guide
+ *
+ */
+
+module.exports = {
+  extends: [
+    "@vercel/style-guide/eslint/browser",
+    "@vercel/style-guide/eslint/typescript",
+    "@vercel/style-guide/eslint/react",
+    "@vercel/style-guide/eslint/next",
+    "eslint-config-turbo",
+  ].map(require.resolve),
+  parserOptions: {
+    project,
+  },
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: ["node_modules/", "dist/"],
+  // add rules configurations here
+  rules: {
+    "import/no-default-export": "off",
+  },
+};
diff --git a/examples/with-tailwind/packages/eslint-config-custom/package.json b/examples/with-tailwind/packages/eslint-config-custom/package.json
@@ -1,15 +1,10 @@
 {
   "name": "eslint-config-custom",
-  "version": "0.0.0",
-  "main": "index.js",
   "license": "MIT",
-  "dependencies": {
-    "eslint-config-next": "^13.4.1",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "7.28.0",
-    "eslint-config-turbo": "^1.9.3"
-  },
-  "publishConfig": {
-    "access": "public"
+  "version": "0.0.0",
+  "private": true,
+  "devDependencies": {
+    "@vercel/style-guide": "^4.0.2",
+    "eslint-config-turbo": "^1.10.12"
   }
 }
diff --git a/examples/with-tailwind/packages/eslint-config-custom/react.js b/examples/with-tailwind/packages/eslint-config-custom/react.js
@@ -0,0 +1,38 @@
+const { resolve } = require("node:path");
+
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/*
+ * This is a custom ESLint configuration for use a library
+ * that utilizes React.
+ *
+ * This config extends the Vercel Engineering Style Guide.
+ * For more information, see https://github.com/vercel/style-guide
+ *
+ */
+
+module.exports = {
+  extends: [
+    "@vercel/style-guide/eslint/browser",
+    "@vercel/style-guide/eslint/typescript",
+    "@vercel/style-guide/eslint/react",
+  ].map(require.resolve),
+  parserOptions: {
+    project,
+  },
+  globals: {
+    JSX: true,
+  },
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  ignorePatterns: ["node_modules/", "dist/", ".eslintrc.js", "**/*.css"],
+  // add rules configurations here
+  rules: {
+    "import/no-default-export": "off",
+  },
+};
diff --git a/examples/with-tailwind/packages/tsconfig/base.json b/examples/with-tailwind/packages/tsconfig/base.json
@@ -14,7 +14,8 @@
     "noUnusedParameters": false,
     "preserveWatchOutput": true,
     "skipLibCheck": true,
-    "strict": true
+    "strict": true,
+    "strictNullChecks": true
   },
   "exclude": ["node_modules"]
 }
diff --git a/examples/with-tailwind/packages/tsconfig/nextjs.json b/examples/with-tailwind/packages/tsconfig/nextjs.json
@@ -4,19 +4,17 @@
   "extends": "./base.json",
   "compilerOptions": {
     "plugins": [{ "name": "next" }],
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
+    "declaration": false,
+    "declarationMap": false,
     "incremental": true,
-    "esModuleInterop": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "esnext"],
     "module": "esnext",
+    "noEmit": true,
     "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
+    "strict": false,
+    "target": "es5"
   },
   "include": ["src", "next-env.d.ts"],
   "exclude": ["node_modules"]

diff --git a/examples/with-tailwind/packages/ui/.eslintrc.js b/examples/with-tailwind/packages/ui/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["custom/react"],
+};
diff --git a/examples/with-tailwind/packages/ui/package.json b/examples/with-tailwind/packages/ui/package.json
@@ -12,6 +12,7 @@
   "license": "MIT",
   "scripts": {
     "build": "tsup",
+    "lint": "eslint src/**/*",
     "dev": "tsup --watch",
     "check-types": "tsc --noEmit"
   },
@@ -20,13 +21,12 @@
   },
   "devDependencies": {
     "@types/react": "^18.2.5",
-    "eslint": "^7.32.0",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.20",
     "react": "^18.2.0",
     "tailwind-config": "workspace:*",
     "tsconfig": "workspace:*",
     "tsup": "^6.1.3",
-    "typescript": "^4.9.4"
+    "typescript": "^5.1.6"
   }
 }
diff --git a/.../with-tailwind/packages/ui/src/Button.tsx → .../with-tailwind/packages/ui/src/button.tsx b/.../with-tailwind/packages/ui/src/Button.tsx → .../with-tailwind/packages/ui/src/button.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export const Button = () => {
+export function Button(): JSX.Element {
   return (
     <div className="rounded-md ">
       <a href="https://turbo.build/repo/docs">
@@ -13,4 +13,4 @@ export const Button = () => {
       </a>
     </div>
   );
-};
+}