feat(next): Improve dev tools for better code quality

.eslintignore

@@ -1,6 +1,7 @@
 node_modules
 lib
+dist
 .next
 
-# Temporary 
-apps
+# Temporary
+apps

.eslintrc

@@ -1,9 +1,15 @@
 {
-  "extends": "@react-native",
+  "extends": ["@react-native"],
   "rules": {
     "@typescript-eslint/no-unused-vars": ["off", { "argsIgnorePattern": "^_" }],
-    "no-unused-vars": "off",
-    "react-hooks/exhaustive-deps": "off",
-    "react-in-jsx-scope": "off"
-  }
+    "no-unused-vars": "warn",
+    "react-hooks/exhaustive-deps": "off"
+  },
+  "overrides": [
+    {
+      /** For test files only */
+      "files": ["**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)"],
+      "extends": ["plugin:testing-library/react"]
+    }
+  ]
 }

.github/actions/setup/action.yml

@@ -11,8 +11,6 @@ runs:
 
     - name: Install pnpm
       uses: pnpm/action-setup@v4
-      with:
-        version: 9
 
     - name: Cache dependencies
       id: pnpm-cache

.github/workflows/ci.yml

@@ -3,9 +3,11 @@ on:
   push:
     branches:
       - main
+      - next
   pull_request:
     branches:
       - main
+      - next
 
 jobs:
   lint:
@@ -34,7 +36,6 @@ jobs:
 
       - name: Run unit tests
         run: |
-          cd ./packages/react-native-ficus-ui
           pnpm test -- --maxWorkers=2 --coverage
 
   build:

.gitignore

@@ -1,63 +1,55 @@
-# OSX
-#
+# macOS
 .DS_Store
 
-# XDE
-.expo/
-
 # VSCode
 .vscode/
 jsconfig.json
 
 # Xcode
-#
 build/
+xcuserdata/
+DerivedData/
+project.xcworkspace
+*.hmap
+*.ipa
+*.xccheckout
+*.moved-aside
 *.pbxuser
-!default.pbxuser
 *.mode1v3
-!default.mode1v3
 *.mode2v3
-!default.mode2v3
 *.perspectivev3
-!default.perspectivev3
-xcuserdata
-*.xccheckout
-*.moved-aside
-DerivedData
-*.hmap
-*.ipa
 *.xcuserstate
-project.xcworkspace
+!default.pbxuser
+!default.mode1v3
+!default.mode2v3
+!default.perspectivev3
 
-# Android/IJ
-#
+# Android/IntelliJ
 .classpath
-.cxx
-.gradle
-.idea
 .project
 .settings
-local.properties
+.cxx/
+.gradle/
+.idea/
 android.iml
+local.properties
 
 # Cocoapods
-#
 example/ios/Pods
 
 # Ruby
 example/vendor/
 
-# node.js
-#
+# Node.js
 node_modules/
 npm-debug.log
 yarn-debug.log
 yarn-error.log
 
 # BUCK
 buck-out/
-\.buckd/
-android/app/libs
+.buckd/
+android/app/libs/
 android/keystores/debug.keystore
 
 # Expo
@@ -66,7 +58,13 @@ android/keystores/debug.keystore
 # Turborepo
 .turbo/
 
-# generated by bob
+# Bob-generated files
 lib/
+dist/
 
+# Next.js
 apps/docs/.next
+
+# TypeScript
+packages/**/tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo

.prettierignore

@@ -1 +1,2 @@
-docs
+# Ignore apps for now
+apps

.prettierrc

@@ -1,7 +1,12 @@
 {
+  "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "useTabs": false,
-  "printWidth": 80
+  "printWidth": 80,
+  "importOrder": ["^react$", "^(?!^react$|^@/|^[./]).*", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderParserPlugins": ["jsx", "typescript"],
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

apps/examples/package.json

@@ -5,6 +5,7 @@
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
+    "dev": "expo start --go",
     "reset-project": "node ./scripts/reset-project.js",
     "android": "expo start --android",
     "ios": "expo start --ios",

jest-setup.ts

@@ -0,0 +1 @@
+import 'react-native-gesture-handler/jestSetup';

jest.config.cjs

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: 'react-native',
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
+  transformIgnorePatterns: ['node_modules/(?!.*react-native).*'],
+  testPathIgnorePatterns: [
+    'lib/typescript/.*\\.test\\.d\\.ts$',
+    'src/.*\\.test\\.d\\.ts$',
+    'src/.*\\.test\\.ts$',
+    '<rootDir>/packages/.*/lib/.*',
+    '<rootDir>/packages/.*/dist/.*',
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+};

lefthook.yml

@@ -4,8 +4,8 @@ pre-commit:
     lint:
       files: git diff --name-only @{push}
       glob: '*.{js,ts,jsx,tsx}'
-      run: npx eslint {files}
+      run: pnpm run lint
     types:
       files: git diff --name-only @{push}
       glob: '*.{js,ts, jsx, tsx}'
-      run: npx tsc --noEmit
+      run: pnpm run typecheck

package.json

@@ -6,26 +6,35 @@
     "node": ">= 18.0.0"
   },
   "scripts": {
-    "dev": "pnpm -C apps/examples run",
+    "dev": "turbo dev --filter='!./apps/docs'",
     "docs:dev": "pnpm -C ./apps/docs run dev",
     "prepack": "pnpm -C ./packages/react-native-ficus-ui run prepack",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint": "eslint packages --ext .ts,.tsx --config .eslintrc",
     "typecheck": "pnpm -C ./packages/react-native-ficus-ui run typecheck",
-    "test:components": "pnpm -C ./packages/react-native-ficus-ui run test",
-    "ci": "pnpm typecheck && pnpm lint && pnpm test:components",
+    "test": "jest --config ./jest.config.cjs",
+    "ci": "pnpm typecheck && pnpm lint && pnpm test",
     "clean": "del ./**/node_modules ./**/lib ./**/.next ./**/.expo",
-    "release": "release-it"
+    "release": "release-it",
+    "format:check": "prettier --check packages --cache",
+    "format:fix": "prettier --write packages --cache"
   },
   "dependencies": {
+    "@testing-library/react-native": "13.0.1",
+    "@trivago/prettier-plugin-sort-imports": "5.2.2",
+    "@types/jest": "29.5.2",
+    "@types/react-test-renderer": "18.0.0",
+    "eslint": "8.57.0",
+    "eslint-plugin-testing-library": "7.1.1",
+    "prettier": "3.4.2",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-test-renderer": "18.2.0"
   },
   "devDependencies": {
     "@react-native/eslint-config": "0.77.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
-    "eslint": "8.57.1",
-    "prettier": "3.4.2"
+    "turbo": "2.4.2"
   },
   "author": {
     "name": "Nicolas Torion",
@@ -41,5 +50,6 @@
       "@types/react": "18.3.1",
       "@types/react-dom": "18.3.1"
     }
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/react-native-ficus-ui/package.json

@@ -4,17 +4,17 @@
   "description": "React Native UI library forked from Magnus UI and inspired by Chakra UI",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
-  "types": "lib/typescript/index.d.ts",
+  "types": "lib/typescript/src/index.d.ts",
   "react-native": "src/index",
   "source": "src/index",
   "files": [
     "src",
     "lib"
   ],
   "scripts": {
-    "test": "jest --config ./jest.config.cjs",
+    "dev": "tsc --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --config ../../.eslintrc",
     "prepack": "bob build"
   },
   "keywords": [
@@ -44,14 +44,10 @@
     "@commitlint/config-conventional": "17.0.2",
     "@evilmartians/lefthook": "1.2.2",
     "@release-it/conventional-changelog": "5.0.0",
-    "@testing-library/jest-native": "^5.4.3",
-    "@testing-library/react-native": "12.1.2",
     "@types/color": "^3.0.3",
-    "@types/jest": "29.5.2",
     "@types/react": "18.2.0",
     "@types/react-native": "0.72.1",
     "@types/react-native-vector-icons": "^6.4.13",
-    "@types/react-test-renderer": "18.0.0",
     "babel-jest": "29.7.0",
     "commitlint": "17.0.2",
     "del-cli": "5.0.0",
@@ -60,9 +56,20 @@
     "react": "18.2.0",
     "react-native": "0.72.1",
     "react-native-builder-bob": "0.21.0",
-    "react-test-renderer": "18.2.0",
     "release-it": "15.0.0",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "@gorhom/bottom-sheet": "5.0.4",
+    "@react-native-community/slider": "4.5.4",
+    "@shopify/flash-list": "1.5.0",
+    "react-native-animatable": "1.3.3",
+    "react-native-confirmation-code-field": "7.4.0",
+    "react-native-gesture-handler": "2.20.2",
+    "react-native-modal": "13.0.1",
+    "react-native-pager-view": "6.2.2",
+    "react-native-reanimated": "3.16.1",
+    "react-native-tab-view": "3.5.2",
+    "react-native-toast-message": "2.1.6",
+    "react-native-vector-icons": "10.0.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "5.0.4",

packages/react-native-ficus-ui/src/components/avatar/avatar.component.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react';
+import React from 'react';
+
 import { ImageBackground as RNImageBackground, Text, View } from 'react-native';
 
-import { getStyle } from './avatar.style';
-import type { AvatarProps } from './avatar.type';
 import { useTheme } from '../../theme/theme.hook';
-import { useDefaultProps } from '../../utilities/useDefaultProps';
 import { handleResponsiveProps } from '../../types';
-import React from 'react';
+import { useDefaultProps } from '../../utilities/useDefaultProps';
 import { Icon } from '../icon/icon.component';
+import { getStyle } from './avatar.style';
+import type { AvatarProps } from './avatar.type';
 
 const Avatar: React.FunctionComponent<AvatarProps> = (incomingProps) => {
   const [isImageValid, setIsImageValid] = useState(false);

packages/react-native-ficus-ui/src/components/avatar/avatar.spec.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import { render } from '@testing-library/react-native';
 
+import { ThemeProvider } from '../../theme/theme.provider';
 import { Avatar } from './avatar.component';
 import type { AvatarProps } from './avatar.type';
-import { ThemeProvider } from '../../theme/theme.provider';
 
 jest.mock('react-native-toast-message', () => 'Toast');