chore: replace deprecated eslint core rules with dprint (#190)

* chore: replace deprecated eslint core rules with dprint

ESLint will deprecate core rules with v8.53.0.
Check blogpost:

https://eslint.org/blog/2023/10/deprecating-formatting-rules/

* chore: fix formatting with dprint

.eslintrc.js

@@ -20,18 +20,18 @@ module.exports = {
   ],
   rules: {
     // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    '@typescript-eslint/consistent-type-imports': [
+      'error',
+    ],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-member-accessibility': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'error',
-    '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/consistent-type-imports': [
-      'error',
-    ],
     '@typescript-eslint/no-unused-vars': [
       'error',
       { argsIgnorePattern: '^_' },
     ],
+    '@typescript-eslint/no-var-requires': 'off',
     'import/order': [
       'error',
       {
@@ -47,23 +47,11 @@ module.exports = {
         'alphabetize': { order: 'asc' },
       },
     ],
-    'max-len': [
-      'error',
-      {
-        code: 120,
-        ignoreComments: true,
-        ignoreRegExpLiterals: true,
-        ignoreStrings: true,
-        ignoreTemplateLiterals: true,
-        ignoreTrailingComments: true,
-        tabWidth: 2,
-      },
-    ],
     'no-underscore-dangle': 'error',
     'no-unused-vars': 'off',
-    'react-hooks/exhaustive-deps': 'warn',
     'react/display-name': 'off',
     'react/prop-types': 'off',
+    'react-hooks/exhaustive-deps': 'warn',
     'react-native/no-inline-styles': 'warn',
     'react-native/no-unused-styles': 'warn',
     'sort-imports': [
@@ -72,24 +60,9 @@ module.exports = {
         ignoreCase: false,
         ignoreDeclarationSort: true,
         ignoreMemberSort: false,
-        memberSyntaxSortOrder: [ 'none', 'all', 'multiple', 'single' ],
+        memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
       },
     ],
-    'object-curly-spacing': [ 'error', 'always', { arraysInObjects: false, objectsInObjects: false }],
-    'array-bracket-spacing': [ 'error', 'always', { objectsInArrays: false, arraysInArrays: false }],
-    'no-extra-parens': [ 'error', 'all' ],
-    'arrow-parens': [ 'error', 'always' ],
-    'semi': [ 'error', 'always' ],
-    'comma-dangle': [ 'error', 'always-multiline' ],
-    'quotes': [ 'error', 'single' ],
-    'padding-line-between-statements': [
-      'error',
-      { blankLine: 'always', prev: 'const', next: '*' },
-      { blankLine: 'any', prev: 'const', next: 'const' },
-      { blankLine: 'always', prev: 'function', next: '*' },
-      { blankLine: 'always', prev: 'block-like', next: '*' },
-    ],
-    'quote-props': [ 'error', 'consistent-as-needed' ],
   },
   settings: {
     react: {

.github/workflows/lint-js.yml

@@ -15,10 +15,10 @@ on:
       - "packages/react-native-avoid-softinput/package.json"
       - "packages/react-native-avoid-softinput/tsconfig.json"
       - ".eslintrc.js"
+      - "dprint.json"
       - "package.json"
       - "tsconfig.base.json"
       - "tsconfig.jest.json"
-      - "tsconfig.json"
       - ".github/workflows/lint-js.yml"
 
 jobs:
@@ -41,5 +41,7 @@ jobs:
       - run: yarn
       - name: ESLint
         run: yarn lint:js
+      - name: dprint
+        uses: dprint/[email protected]
       - name: TypeScript
         run: yarn typescript

.yarnrc.yml

@@ -4,6 +4,6 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-postinstall.cjs
     spec: "https://raw.githubusercontent.com/gravitywelluk/yarn-plugin-postinstall/master/bundles/%40yarnpkg/plugin-postinstall.js"
 
-postinstall: yarn pods:mobile && yarn pods:fabricMobile
+postinstall: "yarn pods:mobile && yarn pods:fabricMobile"
 
-yarnPath: .yarn/releases/yarn-3.3.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.4.cjs

CONTRIBUTING.md

@@ -37,17 +37,19 @@ To run the example app on iOS:
 yarn ios:start
 ```
 
-Make sure your code passes TypeScript and ESLint. Run the following to verify:
+Make sure your code passes TypeScript, ESLint and dprint. Run the following to verify:
 
 ```sh
 yarn typescript
 yarn lint:js
+yarn dprint check
 ```
 
 To fix formatting errors, run the following:
 
 ```sh
 yarn lint:js --fix
+yarn format:js
 ```
 
 To edit the Swift and Objective-C files, run `yarn ios:xcode` and find the source files at `Pods > Development Pods > react-native-avoid-softinput`.
@@ -57,7 +59,7 @@ To edit the Kotlin files:
 - if you have a command line launcher for Android Studio set up, you can run `yarn android:studio`
 - otherwise open `packages/mobile/android` in Android Studio and find the source files at `reactnativeavoidsoftinput` under `Android`.
 
-To run Docusaurus documentation locally, run the following: 
+To run Docusaurus documentation locally, run the following:
 
 ```sh
 yarn docs:start
@@ -99,7 +101,8 @@ git branch chore/2-configuration
 
 ### Linting and tests
 
-- [ESLint](https://eslint.org/) - JS/TS linting and formatting
+- [ESLint](https://eslint.org/) - JS/TS linting
+- [dprint](https://dprint.dev/) - JS/TS formatting
 - [TypeScript](https://www.typescriptlang.org/) - TS type checking
 - [Spotless](https://github.com/diffplug/spotless) & [Ktlint](https://github.com/pinterest/ktlint) - Kotlin/Java linting and formatting
 - [SwiftFormat](https://github.com/nicklockwood/SwiftFormat) - Swift formatting
@@ -129,6 +132,7 @@ The `package.json` file contains various scripts for common tasks:
 - `yarn lint:ios:objc`: run linter (ClangFormat) for all ObjC/ObjC++ files within old arch project (install [ClangFormat](https://clang.llvm.org/) e.g. with Homebrew).
 - `yarn lint:fabric:ios:swift`: run linter (SwiftLint) for all Swift files within new arch project (install [SwiftLint](https://github.com/realm/SwiftLint) e.g. with Homebrew).
 - `yarn lint:fabric:ios:objc`: run linter (ClangFormat) for all ObjC/ObjC++ files within new arch project (install [ClangFormat](https://clang.llvm.org/) e.g. with Homebrew).
+- `yarn format:js`: format all JS/TS files with dprint.
 - `yarn format:android`: format (Spotless/Ktlint) all Kotlin/Java files.
 - `yarn format:ios:swift`: format (SwiftFormat) all Swift files within old arch project (install [SwiftFormat](https://github.com/nicklockwood/SwiftFormat) e.g. with Homebrew).
 - `yarn format:ios:objc`: format (ClangFormat) all ObjC/ObjC++ files within old arch project (install [ClangFormat](https://clang.llvm.org/) e.g. with Homebrew).

docs/babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: [ require.resolve('@docusaurus/core/lib/babel/preset') ],
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
 };

docs/docs/recipes/FORM.mdx

@@ -24,7 +24,6 @@ import { styles as commonStyles } from '../consts/styles';
 
 const icon = require('../../assets/AppIconTransparent.png');
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
 
 export const FormExample: React.FC = () => {

docs/docs/recipes/STICKY_FOOTER.mdx

@@ -25,7 +25,6 @@ import Button from '../components/Button';
 import SingleInput from '../components/SingleInput';
 import { styles as commonStyles } from '../consts/styles';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
 
 export const StickyFooterExample: React.FC = () => {

docs/docusaurus.config.js

@@ -88,7 +88,7 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Mateusz Mędrek. Built with Docusaurus`,
       },
       prism: {
-        additionalLanguages: [ 'swift', 'java', 'kotlin' ],
+        additionalLanguages: ['swift', 'java', 'kotlin'],
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },

docs/src/components/HomepageFeatures.tsx

@@ -14,31 +14,25 @@ const FeatureList: FeatureItem[] = [
   {
     title: 'Handles keyboard fully on native side',
     image: '/img/KeyboardAnimationSVG1.svg',
-    description: 
-      <>
-        Library applies padding or translation on native side and 
-        detects if currently focused input needs to be pushed above displayed keyboard.
-      </>
-    ,
+    description: <>
+      Library applies padding or translation on native side and detects if currently focused input needs to be pushed
+      above displayed keyboard.
+    </>,
   },
   {
     title: 'Easy to Use',
     image: '/img/KeyboardAnimationSVG2.svg',
-    description: 
-      <>
-        Enable AvoidSoftInput module or wrap your content in AvoidSoftInputView 
-        and have your text fields always displayed above the keyboard out-of-the-box.
-      </>
-    ,
+    description: <>
+      Enable AvoidSoftInput module or wrap your content in AvoidSoftInputView and have your text fields always displayed
+      above the keyboard out-of-the-box.
+    </>,
   },
   {
     title: 'Consistent behavior',
     image: '/img/KeyboardAnimationSVG3.svg',
-    description: 
-      <>
-        Library works in same fashion on Android and iOS.
-      </>
-    ,
+    description: <>
+      Library works in same fashion on Android and iOS.
+    </>,
   },
 ];
 
@@ -69,9 +63,7 @@ export const HomepageFeatures: React.FC = () => {
     <section className={styles.features}>
       <div className="container">
         <div className="row">
-          {FeatureList.map((props, idx) => 
-            <Feature key={idx} {...props} />
-          )}
+          {FeatureList.map((props, idx) => <Feature key={idx} {...props} />)}
         </div>
       </div>
     </section>

docs/src/pages/index.tsx

@@ -19,7 +19,8 @@ const HomepageHeader: React.FC = () => {
         <div className={styles.buttons}>
           <Link
             className="button button--secondary button--lg"
-            to="/docs/guides">
+            to="/docs/guides"
+          >
             Getting Started
           </Link>
         </div>
@@ -34,7 +35,8 @@ const Home: React.FC = () => {
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="Description will go into a meta tag in <head />"
+    >
       <HomepageHeader />
       <main>
         <HomepageFeatures />

docs/versioned_docs/version-3.0.x/recipes/FORM.mdx

@@ -24,7 +24,6 @@ import { styles as commonStyles } from '../consts/styles';
 
 const icon = require('../../assets/AppIconTransparent.png');
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
 
 export const FormExample: React.FC = () => {

docs/versioned_docs/version-3.0.x/recipes/STICKY_FOOTER.mdx

@@ -25,7 +25,6 @@ import Button from '../components/Button';
 import SingleInput from '../components/SingleInput';
 import { styles as commonStyles } from '../consts/styles';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
 
 export const StickyFooterExample: React.FC = () => {

docs/versioned_docs/version-4.0.x/recipes/FORM.mdx

@@ -24,7 +24,6 @@ import { styles as commonStyles } from '../consts/styles';
 
 const icon = require('../../assets/AppIconTransparent.png');
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
 
 export const FormExample: React.FC = () => {

docs/versioned_docs/version-4.0.x/recipes/STICKY_FOOTER.mdx

@@ -25,7 +25,6 @@ import Button from '../components/Button';
 import SingleInput from '../components/SingleInput';
 import { styles as commonStyles } from '../consts/styles';
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
 
 export const StickyFooterExample: React.FC = () => {

docs/yarn.lock

@@ -10246,11 +10246,11 @@ __metadata:
 
 "typescript@patch:typescript@^4.7.4#~builtin<compat/typescript>":
   version: 4.9.4
-  resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=ad5954"
+  resolution: "typescript@patch:typescript@npm%3A4.9.4#~builtin<compat/typescript>::version=4.9.4&hash=289587"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 1caaea6cb7f813e64345190fddc4e6c924d0b698ab81189b503763c4a18f7f5501c69362979d36e19c042d89d936443e768a78b0675690b35eb663d19e0eae71
+  checksum: 2160f7ad975c59b2f5816817d3916be1d156c5688a7517602b3b640c5015e740f4ba933996ac85371d68f7bbdd41602150fb8b68334122ac637fdb5418085e7a
   languageName: node
   linkType: hard
 

dprint.json

@@ -0,0 +1,27 @@
+{
+  "typescript": {
+    "jsx.multiLineParens": "never",
+    "jsx.quoteStyle": "preferDouble",
+    "newLineKind": "auto",
+    "quoteProps": "consistent",
+    "quoteStyle": "preferSingle",
+    "semiColons": "always"
+  },
+  "json": {
+  },
+  "markdown": {
+  },
+  "excludes": [
+    ".yarn",
+    "**/build",
+    "**/lib",
+    "**/node_modules",
+    "**/vendor",
+    "**/*-lock.json"
+  ],
+  "plugins": [
+    "https://plugins.dprint.dev/typescript-0.88.3.wasm",
+    "https://plugins.dprint.dev/json-0.19.0.wasm",
+    "https://plugins.dprint.dev/markdown-0.16.2.wasm"
+  ]
+}

lefthook.yml

@@ -5,7 +5,9 @@ pre-commit:
       # Run linter for JS/TS files if any of them are staged
       files: git diff --name-only --cached
       glob: "*.{js,ts,jsx,tsx}"
-      run: yarn lint:js
+      run: |
+        yarn lint:js
+        yarn dprint check
     typescript:
       # Run type-checking for TS files if any of them are staged
       files: git diff --name-only --cached

package.json

@@ -8,12 +8,14 @@
   "scripts": {
     "test": "jest",
     "typescript": "tsc --noEmit -p packages/app/tsconfig.json && tsc --noEmit -p packages/fabricMobile/tsconfig.json && tsc --noEmit -p packages/mobile/tsconfig.json && tsc --noEmit -p packages/react-native-avoid-softinput/tsconfig.json",
+    "dprint": "dprint",
     "lint:js": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:android": "./packages/react-native-avoid-softinput/android/gradlew -p packages/react-native-avoid-softinput/android spotlessCheck --quiet",
     "lint:ios:swift": "swiftlint lint --config ./packages/mobile/ios/.swiftlint.yml --quiet",
     "lint:ios:objc": "clang-format --dry-run -i ./packages/react-native-avoid-softinput/ios/*.{h,mm} ./packages/mobile/ios/AvoidSoftinputExample/*.{h,mm}",
     "lint:fabric:ios:swift": "swiftlint lint --config ./packages/fabricMobile/ios/.swiftlint.yml --quiet",
     "lint:fabric:ios:objc": "clang-format --dry-run -i ./packages/react-native-avoid-softinput/ios/*.{h,mm} ./packages/fabricMobile/ios/FabricAvoidSoftinputExample/*.{h,mm}",
+    "format:js": "dprint fmt",
     "format:android": "./packages/react-native-avoid-softinput/android/gradlew -p packages/react-native-avoid-softinput/android spotlessApply",
     "format:ios:swift": "swiftformat ./packages/react-native-avoid-softinput/ios ./packages/mobile/ios --config ./packages/mobile/ios/.swiftformat",
     "format:ios:objc": "clang-format -i ./packages/react-native-avoid-softinput/ios/*.{h,mm} ./packages/mobile/ios/AvoidSoftinputExample/*.{h,mm} -Werror",
@@ -55,6 +57,7 @@
     "@typescript-eslint/eslint-plugin": "5.61.0",
     "@typescript-eslint/parser": "5.61.0",
     "commitlint": "17.6.6",
+    "dprint": "^0.42.3",
     "eslint": "8.44.0",
     "eslint-config-react": "1.1.7",
     "eslint-plugin-import": "2.27.5",
@@ -69,5 +72,5 @@
       "@commitlint/config-conventional"
     ]
   },
-  "packageManager": "yarn@3.3.1"
+  "packageManager": "yarn@3.6.4"
 }

packages/app/src/components/Button.tsx

@@ -13,7 +13,7 @@ const Button: React.FC<Props> = ({ onPress, title }) => {
     }
 
     return title;
-  }, [ title ]);
+  }, [title]);
 
   return (
     <Pressable
@@ -22,7 +22,8 @@ const Button: React.FC<Props> = ({ onPress, title }) => {
         color: '#2155FF',
       }}
       onPress={onPress}
-      style={({ pressed }) => [ styles.button, pressed && styles.pressedButton ]}>
+      style={({ pressed }) => [styles.button, pressed && styles.pressedButton]}
+    >
       <Text style={styles.text}>{formattedTitle}</Text>
     </Pressable>
   );