feat(eslint): publish eslint package (#140)

Author: GSTJ

.github/workflows/branch-validation.yml

@@ -58,9 +58,6 @@ jobs:
       - name: 🏗 Setup Turborepo Cache
         uses: dtinth/setup-github-actions-caching-for-turbo@v1
 
-      - name: 🧹 Dedupe
-        run: pnpm dedupe --check
-
       - name: 🧪 Typecheck
         run: pnpm run typecheck
 

.github/workflows/docs.yml

@@ -5,6 +5,8 @@ on:
   push:
     branches:
       - main
+    paths:
+      - "packages/modal/**"
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:

.gitignore

@@ -75,8 +75,7 @@ dist
 junit.xml
 docs
 
-**/README.md
-
+**/modal/README.md
 
 .pnp.*
 .yarn/*

examples/kitchen-sink/app.config.ts

@@ -1,4 +1,4 @@
-import { ExpoConfig } from "expo/config";
+import type { ExpoConfig } from "expo/config";
 
 export default {
   name: "react-native-magic-modal-example",

examples/kitchen-sink/babel.config.js

@@ -1,4 +1,6 @@
+// @ts-expect-error -- TODO: Convert to TS
 module.exports = (api) => {
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],

examples/kitchen-sink/eslint.config.js

@@ -0,0 +1,14 @@
+import { join } from "path";
+import { includeIgnoreFile } from "@eslint/compat";
+import reactNativeConfig from "magic-eslint-config/react-native";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  includeIgnoreFile(join(import.meta.dirname, "../../.gitignore")),
+  ...reactNativeConfig,
+  {
+    rules: {
+      "@shopify/jsx-no-hardcoded-content": "off",
+    },
+  },
+];

examples/kitchen-sink/metro.config.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
 // https://github.com/expo/router/blob/main/apps/demo/metro.config.js
 // Learn more https://docs.expo.io/guides/customizing-metro
 const { getDefaultConfig } = require("expo/metro-config");
@@ -11,6 +10,7 @@ const workspaceRoot = path.resolve(projectRoot, "../..");
 
 const config = getDefaultConfig(__dirname);
 
+// @ts-expect-error -- TODO: Convert to TS
 config.watcher = {
   // +73.3
   ...config.watcher,
@@ -22,15 +22,18 @@ config.watcher = {
 // 1. Watch all files within the monorepo
 config.watchFolders = [workspaceRoot];
 // 2. Let Metro know where to resolve packages and in what order
+// @ts-expect-error -- TODO: Convert to TS
 config.resolver.nodeModulesPaths = [
   path.resolve(projectRoot, "node_modules"),
   path.resolve(workspaceRoot, "node_modules"),
 ];
 
 // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+// @ts-expect-error -- TODO: Convert to TS
 config.resolver.disableHierarchicalLookup = true;
 
 const { FileStore } = require("metro-cache");
+// @ts-expect-error -- TODO: Convert to TS
 config.cacheStores = [
   // Ensure the cache isn't shared between projects
   // this ensures the transform-time environment variables are changed to reflect

examples/kitchen-sink/package.json

@@ -25,12 +25,6 @@
       }
     }
   },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@magic/eslint-config/expo"
-    ]
-  },
   "dependencies": {
     "expo": "^52.0.16",
     "expo-constants": "~17.0.2",
@@ -41,16 +35,16 @@
     "expo-status-bar": "~2.0.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-native": "0.76.5",
+    "react-native": "0.76.9",
     "react-native-gesture-handler": "2.20.2",
     "react-native-reanimated": "~3.16.5",
     "react-native-safe-area-context": "4.12.0",
-    "react-native-screens": "~4.1.0",
+    "react-native-screens": "~4.4.0",
     "react-native-web": "~0.19.13"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@magic/eslint-config": "workspace:*",
+    "magic-eslint-config": "workspace:*",
     "@magic/prettier-config": "workspace:*",
     "@magic/tsconfig": "workspace:*",
     "expo-doctor": "1.12.4"

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

@@ -1,12 +1,9 @@
 /* eslint-disable react-native/no-color-literals */
+import type { Direction } from "react-native-magic-modal";
 import React from "react";
 import { Platform, Pressable, StyleSheet, Text } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
-import {
-  Direction,
-  magicModal,
-  MagicModalHideReason,
-} from "react-native-magic-modal";
+import { magicModal, MagicModalHideReason } from "react-native-magic-modal";
 import { ZoomIn, ZoomOut } from "react-native-reanimated";
 import { router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
@@ -39,14 +36,18 @@ const showModal = async () => {
   console.log("Modal closed with response:", await modalResponse.promise);
 };
 
-type ModalResponse = {
+interface ModalResponse {
   message: string;
-};
+}
 
 const showReplacingModals = async () => {
   const modalResponse = magicModal.show<ModalResponse>(() => <ExampleModal />);
 
-  await new Promise<void>((resolve) => setTimeout(() => resolve(), 1000));
+  await new Promise<void>((resolve) =>
+    setTimeout(() => {
+      resolve();
+    }, 1000),
+  );
 
   magicModal.hide<ModalResponse>(
     { message: "close timeout" },
@@ -125,7 +126,9 @@ export default () => {
         <>
           <Pressable
             style={styles.button}
-            onPress={() => router.push("/modal")}
+            onPress={() => {
+              router.push("/modal");
+            }}
           >
             <Text style={styles.buttonText}>Open Modal Screen</Text>
           </Pressable>

examples/kitchen-sink/src/components/ExampleModal.tsx

@@ -15,7 +15,9 @@ export const ExampleModal = () => {
         This is an example to showcase the imperative Magic Modal!
       </Text>
       <Pressable
-        onPress={() => hide("close button pressed")}
+        onPress={() => {
+          hide("close button pressed");
+        }}
         style={styles.buttonContainer}
       >
         <Text style={styles.button}>Close Modal</Text>