fix eslint not working properly across monorepo packages

Author: MarceloPrado

.eslintrc.js

@@ -0,0 +1,10 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  ignorePatterns: ["apps/**", "packages/**"],
+  extends: ["@marceloterreiro/eslint-config"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

apps/example/.eslintrc.js

@@ -0,0 +1,8 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@marceloterreiro/eslint-config"],
+  rules: {
+    'import/order': 'off',
+  }
+};

apps/example/.storybook/index.ts

@@ -1,5 +1,5 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import { view } from './storybook.requires';
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { view } from "./storybook.requires";
 
 const StorybookUIRoot = view.getStorybookUI({
   storage: {

apps/example/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {

apps/example/babel.config.js

@@ -1,6 +1,6 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: ["babel-preset-expo"],
   };
 };

apps/example/index.js

@@ -1,4 +1,5 @@
 import { registerRootComponent } from "expo";
+
 import App from "./src/App";
 
 registerRootComponent(App);

apps/example/metro.config.js

@@ -1,8 +1,8 @@
 const { getDefaultConfig } = require("expo/metro-config");
-const { generate } = require("@storybook/react-native/scripts/generate");
-
 const path = require("path");
 
+const { generate } = require("@storybook/react-native/scripts/generate");
+
 // Storybook setup
 generate({
   configPath: path.resolve(__dirname, "./.storybook"),

apps/example/package.json

@@ -9,7 +9,8 @@
     "web": "expo start --web",
     "dev": "expo start --ios",
     "clean": "rm -rf dist && rm -rf node_modules",
-    "storybook-generate": "sb-rn-get-stories"
+    "storybook-generate": "sb-rn-get-stories",
+    "lint": "eslint ."
   },
   "dependencies": {
     "@marceloterreiro/flash-calendar": "*",
@@ -21,6 +22,8 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@marceloterreiro/tsconfig": "*",
+    "@marceloterreiro/eslint-config": "*",
+    "eslint": "^8.56.0",
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-native-community/datetimepicker": "^7.6.2",
     "@react-native-community/slider": "^4.5.0",
@@ -31,7 +34,7 @@
     "babel-loader": "^8.3.0",
     "react-dom": "^18.2.0",
     "react-native-safe-area-context": "^4.9.0",
-    "typescript": "^5.3.0"
+    "typescript": "^5.3.3"
   },
   "private": true
 }

bun.lockb

@@ -7,14 +7,20 @@
     "packages/*"
   ],
   "scripts": {
+    "build": "turbo build",
+    "clean": "turbo clean && rm -rf node_modules",
     "dev": "turbo dev",
     "lint": "turbo lint",
-    "test": "turbo test",
-    "build": "turbo build",
-    "clean": "turbo clean && rm -rf node_modules"
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "test": "turbo test"
   },
   "devDependencies": {
+    "@marceloterreiro/eslint-config": "*",
     "@marceloterreiro/tsconfig": "*",
+    "@typescript-eslint/typescript-estree": "^6.21.0",
+    "prettier": "^2.8.8",
+    "turbo": "^1.12.1",
     "typescript": "^5.3.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

package.json

@@ -1,14 +1,41 @@
-// Copied from Cedric's repo: https://github.com/byCedric/expo-monorepo-example/blob/main/packages/eslint-config/index.js
+const { resolve } = require("node:path");
 
+const project = resolve(process.cwd(), "tsconfig.json");
+
+/** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: "eslint-config-universe",
-  // do some additional things with it
-  rules: {
-    "prettier/prettier": ["error", { endOfLine: "auto" }],
+  extends: [
+    "eslint:recommended",
+    "eslint-config-universe",
+    "eslint-config-turbo",
+    "prettier",
+  ],
+  parserOptions: {
+    project,
+  },
+  globals: {
+    React: true,
+    JSX: true,
+  },
+  env: {
+    node: true,
   },
-  // Disable import/namespace due to https://github.com/facebook/react-native/issues/28549
-  // By setting delimiters to `\|/`, this ignore is supported on Windows too
   settings: {
-    "import/ignore": ["node_modules(\\\\|/)react-native(\\\\|/)index\\.js$"],
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
   },
+  ignorePatterns: [
+    // Ignore dotfiles
+    ".*.js",
+    "node_modules/",
+    "dist/",
+  ],
+  overrides: [
+    {
+      files: ["*.js?(x)", "*.ts?(x)"],
+    },
+  ],
 };

packages/eslint-config/index.js

@@ -1,25 +1,16 @@
 {
-  "private": true,
   "name": "@marceloterreiro/eslint-config",
-  "version": "0.0.1",
-  "description": "A shared eslint configuration for Marcelo's projects",
-  "author": "Marcelo Prado <[email protected]>",
   "license": "MIT",
-  "main": "index.js",
-  "files": [
-    "index.js"
-  ],
-  "scripts": {
-    "lint": "eslint --ext js,ts,tsx ."
-  },
-  "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "eslint": "^8.34.0",
+  "main": "./index.js",
+  "version": "0.0.1",
+  "private": true,
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-turbo": "^1.12.3",
     "eslint-config-universe": "^11.2.0",
-    "prettier": "^2.7.1"
-  },
-  "eslintConfig": {
-    "extends": "."
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "typescript": "^5.3.0"
   }
 }

packages/eslint-config/package.json

@@ -0,0 +1,12 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@marceloterreiro/eslint-config", "plugin:react-hooks/recommended"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+  rules: {
+    "react-hooks/exhaustive-deps": "error",
+  },
+};

packages/flash-calendar/.eslintrc.js

@@ -10,31 +10,28 @@
   "license": "MIT",
   "scripts": {
     "dev": "tsup --watch --silent",
-    "lint": "eslint --ext js,ts,tsx .",
+    "lint": "eslint src",
     "test": "bun test",
     "build": "tsup --dts",
     "clean": "rm -rf dist && rm -rf node_modules"
   },
-  "dependencies": {},
+  "dependencies": {
+    "date-fns": "^3.3.1"
+  },
   "peerDependencies": {
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
     "@marceloterreiro/eslint-config": "*",
     "@marceloterreiro/tsconfig": "*",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint": "^8.56.0",
     "@types/bun": "^1.0.5",
-    "date-fns": "^3.3.1",
     "react": "18.2.0",
     "react-native": "0.73.4",
-    "tsup": "^8.0.1"
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3"
   },
-  "private": false,
-  "eslintConfig": {
-    "extends": "@marceloterreiro/eslint-config",
-    "ignorePatterns": [
-      "node_modules",
-      "build"
-    ]
-  }
+  "private": false
 }

packages/flash-calendar/package.json

@@ -6,13 +6,20 @@ import {
   CalendarItemEmpty,
 } from "@/components/CalendarItemDay";
 import { CalendarItemWeekName } from "@/components/CalendarItemWeekName";
-import { CalendarRowMonth } from "@/components/CalendarRowMonth";
+import {
+  CalendarRowMonth,
+  CalendarRowMonthProps,
+} from "@/components/CalendarRowMonth";
 import { CalendarRowWeek } from "@/components/CalendarRowWeek";
 import { VStack } from "@/components/VStack";
 import { uppercaseFirstLetter } from "@/helpers/strings";
 import { tokens } from "@/helpers/tokens";
 import { BuildCalendarParams, useCalendar } from "@/hooks/useCalendar";
 
+export type CalendarTheme = {
+  rowMonthTheme: CalendarRowMonthProps["theme"];
+};
+
 export interface CalendarProps extends BuildCalendarParams {
   onDayPress: (dateId: string, date: Date) => void;
   disabledDates?: string[];
@@ -23,6 +30,8 @@ export interface CalendarProps extends BuildCalendarParams {
    * @default 8
    */
   calendarRowSpacing?: number;
+  /** Theme to customize the calendar component. */
+  theme?: CalendarTheme;
 }
 
 export const Calendar = memo(
@@ -31,6 +40,7 @@ export const Calendar = memo(
     disabledDates,
     activeDateRanges,
     calendarRowSpacing = 8,
+    theme,
     ...buildCalendarParams
   }: CalendarProps) => {
     const { calendarRowMonth, weeksList, weekDaysList } =
@@ -41,7 +51,7 @@ export const Calendar = memo(
         alignItems="center"
         spacing={calendarRowSpacing as keyof typeof tokens.spacing}
       >
-        <CalendarRowMonth>
+        <CalendarRowMonth height={20} theme={theme?.rowMonthTheme}>
           {uppercaseFirstLetter(calendarRowMonth)}
         </CalendarRowMonth>
         <CalendarRowWeek spacing={8}>