migrated to turborepo, tsup & next.js

Author: onderonur

.all-contributorsrc

@@ -3,9 +3,7 @@
   "projectOwner": "onderonur",
   "repoType": "github",
   "repoHost": "https://github.com",
-  "files": [
-    "README.md"
-  ],
+  "files": ["README.md"],
   "imageSize": 100,
   "commit": true,
   "commitConvention": "none",
@@ -15,9 +13,7 @@
       "name": "KimSeonghyeon",
       "avatar_url": "https://avatars.githubusercontent.com/u/13966404?v=4",
       "profile": "https://seonghyeonkimm.github.io/",
-      "contributions": [
-        "code"
-      ]
+      "contributions": ["code"]
     }
   ],
   "contributorsPerLine": 7

.eslintrc.js

@@ -1,57 +1,10 @@
+// This configuration only applies to the package manager root.
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
-  env: {
-    browser: true,
-    es6: true,
-  },
-  extends: ['react-app', 'plugin:react/recommended', 'airbnb', 'prettier'],
+  ignorePatterns: ['apps/**', 'packages/**'],
+  extends: ['@repo/eslint-config/library.js'],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 12,
-    sourceType: 'module',
-  },
-  plugins: ['react', '@typescript-eslint', 'prettier'],
-  settings: {
-    'import/resolver': {
-      node: {
-        extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      },
-    },
-  },
-  // https://github.com/typescript-eslint/typescript-eslint/blob/main/docs/linting/TROUBLESHOOTING.md#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
-  overrides: [
-    {
-      files: ['*.ts', '*.mts', '*.cts', '*.tsx'],
-      rules: {
-        'no-undef': 'off',
-      },
-    },
-  ],
-  rules: {
-    'prettier/prettier': 'warn',
-    'no-shadow': 'warn',
-    'no-unused-vars': 'off',
-    radix: 'off',
-    '@typescript-eslint/no-unused-vars': 'warn',
-    // For optional chaining to not create linting errors
-    'no-unused-expressions': 'off',
-    'arrow-body-style': 'off',
-    'import/extensions': 'off',
-    'import/no-extraneous-dependencies': 'off',
-    'import/order': 'off',
-    'import/newline-after-import': 'warn',
-    'import/prefer-default-export': 'off',
-    'no-use-before-define': 'off',
-    '@typescript-eslint/no-use-before-define': 'warn',
-    'react/jsx-curly-newline': 'off',
-    'react/jsx-tag-spacing': 'warn',
-    'react/button-has-type': 'warn',
-    'react/jsx-filename-extension': [
-      'warn',
-      { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
-    ],
-    'react/jsx-one-expression-per-line': 'off',
+    project: true,
   },
 };

.github/composite-actions/install/action.yml

@@ -0,0 +1,15 @@
+name: Install
+description: Sets up Node.js and runs install
+
+runs:
+  using: composite
+  steps:
+    - name: Setup Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: 20
+        cache: npm
+
+    - name: Install dependencies
+      shell: bash
+      run: npm ci

.github/workflows/main.yml

@@ -0,0 +1,65 @@
+name: Quality
+
+on:
+  push:
+    branches:
+      # TODO: This will be replaced with `main` later.
+      - monorepo
+
+# To cancel previous workflow when a new one is triggered.
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  format:
+    name: Format
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/composite-actions/install
+
+      - name: Run format check
+        run: npm run format
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/composite-actions/install
+
+      - name: Run lint check
+        run: npm run lint
+
+  typecheck:
+    name: Typecheck
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/composite-actions/install
+
+      - name: Run type check
+        run: npm run typecheck
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out
+        uses: actions/checkout@v4
+
+      - name: Install
+        uses: ./.github/composite-actions/install
+
+      - name: Run build
+        run: npm run build

.github/workflows/quality.yml

@@ -1,9 +1,38 @@
-*.log
-.DS_Store
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# Dependencies
 node_modules
-.cache
-.rts2_cache_cjs
-.rts2_cache_esm
-.rts2_cache_umd
-.rts2_cache_system
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+.next/
+out/
+build
 dist
+
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Misc
+.DS_Store
+*.pem

.gitignore

@@ -1,4 +1,2 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx tsdx lint
+npx lint-staged
+npm run typecheck

.husky/.gitignore

@@ -1,6 +1,6 @@
 # react-intersection-observer-hook
 
-![Build status](https://img.shields.io/github/actions/workflow/status/onderonur/react-intersection-observer-hook/main.yml)
+![Build status](https://img.shields.io/github/actions/workflow/status/onderonur/react-intersection-observer-hook/quality.yml)
 ![License](https://img.shields.io/npm/l/react-intersection-observer-hook)
 ![Version](https://img.shields.io/npm/v/react-intersection-observer-hook)
 
@@ -92,10 +92,8 @@ function Example() {
   // `rootRef`: Same ref callback which is returned by `useIntersectionObserver`.
   // `isVisible`: Becomes true/false based on the response of `IntersectionObserver`.
   // `wasEverVisible`: When our observed node becomes visible once, this flag becomes `true` and stays like that.
-  const [
-    ref,
-    { entry, rootRef, isVisible, wasEverVisible },
-  ] = useTrackVisibility();
+  const [ref, { entry, rootRef, isVisible, wasEverVisible }] =
+    useTrackVisibility();
 
   useEffect(() => {
     console.log(`The component is ${isVisible ? 'visible' : 'not visible'}.`);