docs: docusaurus 3.0 (#265)

## 📜 Description

Updated docs engine to docusaurus 3.0

## 💡 Motivation and Context

Docusaurus brings new features, so it's important to stay up-to-date.
Moreover previous versions support can be dropped in a near future.

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### Docs
- update all deps;
- use docusaurus 3.1

## 🤔 How Has This Been Tested?

Tested via CI.

## 📝 Checklist

- [x] CI successfully passed

docs/docs/api/components/keyboard-aware-scroll-view.mdx

@@ -43,16 +43,18 @@ Below is a table with the most important functions and their support in various
 
 > <sup>1</sup> <b>only</b> on <b>iOS</b>
 
-> <sup>2</sup> <code>KeyboardAwareScrollView</code> is implemented in JS, but some
-> hooks (<code>useKeyboardHandler</code>/<code>useReanimatedFocusedInput</code>/<code>
->   useFocusedInputHandler
-> </code>) exposed from native code
-
-> <sup>3</sup> achievable with <code>
->   KeyboardManager.reloadLayoutIfNeeded()
-> </code> usage in appropriate <code>TextInput</code> callbacks (<code>
->   onLayout
-> </code>/<code>onChangeText</code>)
+<!-- prettier-ignore-start -->
+> <sup>2</sup> <code>KeyboardAwareScrollView</code> is implemented in JS, but some hooks
+> (<code>useKeyboardHandler</code>/<code>useReanimatedFocusedInput</code>/<code>useFocusedInputHandler</code>)
+> exposed from native code
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+> <sup>3</sup> achievable with
+> <code>KeyboardManager.reloadLayoutIfNeeded()</code>
+> usage in appropriate <code>TextInput</code> callbacks
+> (<code>onLayout</code>/<code>onChangeText</code>)
+<!-- prettier-ignore-end -->
 
 > <sup>4</sup> since it's JS based solution it supports new architecture, but it
 > uses <b>deprecated</b> API.

docs/docs/api/hooks/keyboard/use-keyboard-handler/index.mdx

@@ -89,12 +89,12 @@ export const onStartCode = (
     This function is called before the keyboard movement starts.{" "}
     <code>height</code> and <code>progress</code> values will have{" "}
     <b>destination</b> values, i. e. if keyboard was closed but will appear -
-    these values will have a values like "keyboard is already opened" (
-    <code>progress</code> will be equal to <code>1</code> and{" "}
+    these values will have a values like "keyboard is already opened"
+    (<code>progress</code> will be equal to <code>1</code> and{" "}
     <code>height</code> will have non-zero value).
-    <br />
-    <br />
+
     <div className="desktop">{onStartCode}</div>
+
   </div>
   <div>
     <img src={require("./start.png").default} />
@@ -123,9 +123,9 @@ export const onMoveCode = (
   <div className="description-block">
     This function will be called every frame when the keyboard changes its
     position.
-    <br />
-    <br />
+
     <div className="desktop">{onMoveCode}</div>
+
   </div>
   <div>
     <img src={require("./move.png").default} />
@@ -160,14 +160,14 @@ export const onInteractiveCode = (
   <div className="description-block">
     This function will be called every frame when user changes position of the
     keyboard by the drag.
-    <br />
-    <br />
-    If finger is released and keyboard animates to its final destination, then the
-    standard <code>onStart</code>/<code>onMove</code>/<code>onEnd</code> lifecycles
-    will be triggered.
-    <br />
-    <br />
+
+    <span>
+      If finger is released and keyboard animates to its final destination, then
+      the standard <code>onStart</code>/<code>onMove</code>/<code>onEnd</code>{" "}
+      lifecycles will be triggered.
+    </span>
     <div className="desktop">{onInteractiveCode}</div>
+
   </div>
   <div>
     <img src={require("./interactive.png").default} />
@@ -202,8 +202,6 @@ export const onEndCode = (
   <div className="description-block">
     This function will be called when the keyboard has completed its movement.
     The event will contain <b>current</b> keyboard metrics.
-    <br />
-    <br />
     <div className="desktop">{onEndCode}</div>
   </div>
   <div>

docs/docusaurus.config.js

@@ -1,8 +1,9 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
-const lightCodeTheme = require("prism-react-renderer/themes/github");
+const { themes } = require("prism-react-renderer");
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 let baseUrl = "/react-native-keyboard-controller/";
 if (process.env.PREVIEW_PATH) baseUrl += process.env.PREVIEW_PATH;
@@ -167,7 +168,14 @@ const config = {
         copyright: `Copyright © ${new Date().getFullYear()} Kirill Zyusko. Built with Docusaurus.`,
       },
       prism: {
-        additionalLanguages: ["java", "kotlin", "swift"],
+        additionalLanguages: [
+          "java",
+          "kotlin",
+          "swift",
+          "json",
+          "diff",
+          "bash",
+        ],
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
         magicComments: [

docs/package.json

@@ -15,24 +15,25 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.0",
-    "@docusaurus/preset-classic": "2.4.0",
-    "@mdx-js/react": "^1.6.22",
-    "clsx": "^1.2.1",
-    "lottie-react": "^2.3.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@docusaurus/core": "3.1.1",
+    "@docusaurus/preset-classic": "3.1.1",
+    "@mdx-js/react": "^3.0.0",
+    "clsx": "^2.0.0",
+    "lottie-react": "^2.4.0",
+    "prism-react-renderer": "^2.3.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@argos-ci/cli": "^1.0.0",
     "@argos-ci/playwright": "^1.0.1",
-    "@docusaurus/module-type-aliases": "2.4.0",
+    "@docusaurus/module-type-aliases": "3.1.1",
+    "@docusaurus/tsconfig": "3.1.1",
+    "@docusaurus/types": "3.1.1",
     "@playwright/test": "^1.39.0",
-    "@tsconfig/docusaurus": "^1.0.5",
     "cheerio": "^1.0.0-rc.12",
-    "markdownlint-cli2": "^0.7.1",
-    "typescript": "^4.7.4"
+    "markdownlint-cli2": "^0.12.1",
+    "typescript": "^5.2.2"
   },
   "browserslist": {
     "production": [
@@ -41,12 +42,12 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "last 3 chrome version",
+      "last 3 firefox version",
+      "last 5 safari version"
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }

docs/versioned_docs/version-1.10.0/api/components/keyboard-aware-scroll-view.mdx

@@ -43,16 +43,18 @@ Below is a table with the most important functions and their support in various
 
 > <sup>1</sup> <b>only</b> on <b>iOS</b>
 
-> <sup>2</sup> <code>KeyboardAwareScrollView</code> is implemented in JS, but some
-> hooks (<code>useKeyboardHandler</code>/<code>useReanimatedFocusedInput</code>/<code>
->   useFocusedInputHandler
-> </code>) exposed from native code
-
-> <sup>3</sup> achievable with <code>
->   KeyboardManager.reloadLayoutIfNeeded()
-> </code> usage in appropriate <code>TextInput</code> callbacks (<code>
->   onLayout
-> </code>/<code>onChangeText</code>)
+<!-- prettier-ignore-start -->
+> <sup>2</sup> <code>KeyboardAwareScrollView</code> is implemented in JS, but some hooks
+> (<code>useKeyboardHandler</code>/<code>useReanimatedFocusedInput</code>/<code>useFocusedInputHandler</code>)
+> exposed from native code
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+> <sup>3</sup> achievable with
+> <code>KeyboardManager.reloadLayoutIfNeeded()</code>
+> usage in appropriate <code>TextInput</code> callbacks
+> (<code>onLayout</code>/<code>onChangeText</code>)
+<!-- prettier-ignore-end -->
 
 > <sup>4</sup> since it's JS based solution it supports new architecture, but it
 > uses <b>deprecated</b> API.

docs/versioned_docs/version-1.10.0/api/hooks/keyboard/use-keyboard-handler/index.mdx

@@ -89,12 +89,12 @@ export const onStartCode = (
     This function is called before the keyboard movement starts.{" "}
     <code>height</code> and <code>progress</code> values will have{" "}
     <b>destination</b> values, i. e. if keyboard was closed but will appear -
-    these values will have a values like "keyboard is already opened" (
-    <code>progress</code> will be equal to <code>1</code> and{" "}
+    these values will have a values like "keyboard is already opened"
+    (<code>progress</code> will be equal to <code>1</code> and{" "}
     <code>height</code> will have non-zero value).
-    <br />
-    <br />
+
     <div className="desktop">{onStartCode}</div>
+
   </div>
   <div>
     <img src={require("./start.png").default} />
@@ -123,9 +123,9 @@ export const onMoveCode = (
   <div className="description-block">
     This function will be called every frame when the keyboard changes its
     position.
-    <br />
-    <br />
+
     <div className="desktop">{onMoveCode}</div>
+
   </div>
   <div>
     <img src={require("./move.png").default} />
@@ -160,14 +160,14 @@ export const onInteractiveCode = (
   <div className="description-block">
     This function will be called every frame when user changes position of the
     keyboard by the drag.
-    <br />
-    <br />
-    If finger is released and keyboard animates to its final destination, then the
-    standard <code>onStart</code>/<code>onMove</code>/<code>onEnd</code> lifecycles
-    will be triggered.
-    <br />
-    <br />
+
+    <span>
+      If finger is released and keyboard animates to its final destination, then
+      the standard <code>onStart</code>/<code>onMove</code>/<code>onEnd</code>{" "}
+      lifecycles will be triggered.
+    </span>
     <div className="desktop">{onInteractiveCode}</div>
+
   </div>
   <div>
     <img src={require("./interactive.png").default} />
@@ -202,8 +202,6 @@ export const onEndCode = (
   <div className="description-block">
     This function will be called when the keyboard has completed its movement.
     The event will contain <b>current</b> keyboard metrics.
-    <br />
-    <br />
     <div className="desktop">{onEndCode}</div>
   </div>
   <div>

docs/versioned_docs/version-1.11.0/api/components/keyboard-aware-scroll-view.mdx

@@ -43,16 +43,18 @@ Below is a table with the most important functions and their support in various
 
 > <sup>1</sup> <b>only</b> on <b>iOS</b>
 
-> <sup>2</sup> <code>KeyboardAwareScrollView</code> is implemented in JS, but some
-> hooks (<code>useKeyboardHandler</code>/<code>useReanimatedFocusedInput</code>/<code>
->   useFocusedInputHandler
-> </code>) exposed from native code
-
-> <sup>3</sup> achievable with <code>
->   KeyboardManager.reloadLayoutIfNeeded()
-> </code> usage in appropriate <code>TextInput</code> callbacks (<code>
->   onLayout
-> </code>/<code>onChangeText</code>)
+<!-- prettier-ignore-start -->
+> <sup>2</sup> <code>KeyboardAwareScrollView</code> is implemented in JS, but some hooks
+> (<code>useKeyboardHandler</code>/<code>useReanimatedFocusedInput</code>/<code>useFocusedInputHandler</code>)
+> exposed from native code
+<!-- prettier-ignore-end -->
+
+<!-- prettier-ignore-start -->
+> <sup>3</sup> achievable with
+> <code>KeyboardManager.reloadLayoutIfNeeded()</code>
+> usage in appropriate <code>TextInput</code> callbacks
+> (<code>onLayout</code>/<code>onChangeText</code>)
+<!-- prettier-ignore-end -->
 
 > <sup>4</sup> since it's JS based solution it supports new architecture, but it
 > uses <b>deprecated</b> API.

docs/versioned_docs/version-1.11.0/api/hooks/keyboard/use-keyboard-handler/index.mdx

@@ -89,12 +89,12 @@ export const onStartCode = (
     This function is called before the keyboard movement starts.{" "}
     <code>height</code> and <code>progress</code> values will have{" "}
     <b>destination</b> values, i. e. if keyboard was closed but will appear -
-    these values will have a values like "keyboard is already opened" (
-    <code>progress</code> will be equal to <code>1</code> and{" "}
+    these values will have a values like "keyboard is already opened"
+    (<code>progress</code> will be equal to <code>1</code> and{" "}
     <code>height</code> will have non-zero value).
-    <br />
-    <br />
+
     <div className="desktop">{onStartCode}</div>
+
   </div>
   <div>
     <img src={require("./start.png").default} />
@@ -123,9 +123,9 @@ export const onMoveCode = (
   <div className="description-block">
     This function will be called every frame when the keyboard changes its
     position.
-    <br />
-    <br />
+
     <div className="desktop">{onMoveCode}</div>
+
   </div>
   <div>
     <img src={require("./move.png").default} />
@@ -160,14 +160,14 @@ export const onInteractiveCode = (
   <div className="description-block">
     This function will be called every frame when user changes position of the
     keyboard by the drag.
-    <br />
-    <br />
-    If finger is released and keyboard animates to its final destination, then the
-    standard <code>onStart</code>/<code>onMove</code>/<code>onEnd</code> lifecycles
-    will be triggered.
-    <br />
-    <br />
+
+    <span>
+      If finger is released and keyboard animates to its final destination, then
+      the standard <code>onStart</code>/<code>onMove</code>/<code>onEnd</code>{" "}
+      lifecycles will be triggered.
+    </span>
     <div className="desktop">{onInteractiveCode}</div>
+
   </div>
   <div>
     <img src={require("./interactive.png").default} />
@@ -202,8 +202,6 @@ export const onEndCode = (
   <div className="description-block">
     This function will be called when the keyboard has completed its movement.
     The event will contain <b>current</b> keyboard metrics.
-    <br />
-    <br />
     <div className="desktop">{onEndCode}</div>
   </div>
   <div>

docs/versioned_docs/version-1.4.0/api/hooks/use-keyboard-handler/index.mdx

@@ -69,12 +69,12 @@ export const onStartCode = (
     This function is called before the keyboard movement starts.{" "}
     <code>height</code> and <code>progress</code> values will have{" "}
     <b>destination</b> values, i. e. if keyboard was closed but will appear -
-    these values will have a values like "keyboard is already opened" (
-    <code>progress</code> will be equal to <code>1</code> and{" "}
+    these values will have a values like "keyboard is already opened"
+    (<code>progress</code> will be equal to <code>1</code> and{" "}
     <code>height</code> will have non-zero value).
-    <br />
-    <br />
+
     <div className="desktop">{onStartCode}</div>
+
   </div>
   <div>
     <img src={require("./start.png").default} />
@@ -103,9 +103,9 @@ export const onMoveCode = (
   <div className="description-block">
     This function will be called every frame when the keyboard changes its
     position.
-    <br />
-    <br />
+
     <div className="desktop">{onMoveCode}</div>
+
   </div>
   <div>
     <img src={require("./move.png").default} />
@@ -140,8 +140,6 @@ export const onEndCode = (
   <div className="description-block">
     This function will be called when the keyboard has completed its movement.
     The event will contain <b>current</b> keyboard metrics.
-    <br />
-    <br />
     <div className="desktop">{onEndCode}</div>
   </div>
   <div>