feat(examples): update tailwind lint

vercel · Aug 22, 2023 · 4bf20f7 · 4bf20f7
1 parent cb6105a
commit 4bf20f7
Show file tree

Hide file tree

Showing 26 changed files with 2,396 additions and 1,224 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: ["eslint-config-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: ["eslint-config-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/index.js b/examples/with-tailwind/packages/eslint-config-custom/index.js
diff --git a/examples/with-tailwind/packages/eslint-config-custom/package.json b/examples/with-tailwind/packages/eslint-config-custom/package.json
diff --git a/examples/with-tailwind/packages/eslint-config/README.md b/examples/with-tailwind/packages/eslint-config/README.md
@@ -0,0 +1,3 @@
+# `@turbo/eslint-config`
+
+Collection of internal eslint configurations.
diff --git a/examples/with-tailwind/packages/eslint-config/library.js b/examples/with-tailwind/packages/eslint-config/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/next.js b/examples/with-tailwind/packages/eslint-config/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/package.json b/examples/with-tailwind/packages/eslint-config/package.json
@@ -0,0 +1,10 @@
+{
+ "name": "eslint-config-custom",
+ "license": "MIT",
+ "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/react.js b/examples/with-tailwind/packages/eslint-config/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: ["eslint-config-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>
  );
-};
+}