Merge pull request #972 from facebook/main

sync

Author: sunnylqm

.github/workflows/pre-merge.yml

@@ -21,12 +21,15 @@ jobs:
           node-version: "20"
           cache: "yarn"
 
-      - name: Check dependencies
+      - name: Check lock for duplications
         run: yarn dedupe --check
 
       - name: Install dependencies
         run: yarn install --immutable
 
+      - name: Check dependencies alignment
+        run: yarn check-dependencies
+
       - name: Run Lint
         run: yarn ci:lint
         working-directory: website

package.json

@@ -17,9 +17,11 @@
     "build": "yarn --cwd website build",
     "build:fast": "yarn --cwd website build:fast",
     "serve": "yarn --cwd website serve",
-    "prepare": "husky"
+    "prepare": "husky",
+    "check-dependencies": "manypkg check"
   },
-  "dependencies": {
+  "devDependencies": {
+    "@manypkg/cli": "^0.25.0",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-mdx": "^3.6.2",
@@ -30,5 +32,8 @@
     "prettier": "^3.6.2",
     "pretty-quick": "^4.2.2"
   },
+  "resolutions": {
+    "@typescript-eslint/typescript-estree": "8.39.1"
+  },
   "packageManager": "[email protected]"
 }

scripts/lint-examples/package.json

@@ -8,20 +8,20 @@
     "tsc-examples": "./bin/tsc-examples.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/runtime": "^7.26.10",
-    "@react-native-community/slider": "^4.5.3",
-    "@react-native/babel-preset": "^0.76.0-rc.2",
-    "@react-native/eslint-config": "^0.76.0-rc.2",
-    "@react-native/typescript-config": "^0.76.0-rc.2",
-    "@types/react": "^18.2.79",
+    "@babel/core": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/runtime": "^7.28.3",
+    "@react-native-community/slider": "^4.5.7",
+    "@react-native/babel-preset": "^0.81.0",
+    "@react-native/eslint-config": "^0.81.0",
+    "@react-native/typescript-config": "^0.81.0",
+    "@types/react": "^19.1.10",
     "eslint": "^8.57.1",
     "glob": "^11.0.0",
-    "prettier": "^3.4.2",
-    "react": "18.3.1",
-    "react-native": "^0.76.0-rc.2",
-    "react-native-safe-area-context": "^4.11.0",
-    "typescript": "5.5.4"
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-native": "^0.81.0",
+    "react-native-safe-area-context": "^5.6.0",
+    "typescript": "^5.9.2"
   }
 }

website/package.json

@@ -57,8 +57,8 @@
     "@docusaurus/plugin-pwa": "3.8.1",
     "@docusaurus/preset-classic": "3.8.1",
     "docusaurus-plugin-sass": "^0.2.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-github-btn": "^1.4.0",
     "sass": "1.76.0"
   },
@@ -69,14 +69,14 @@
     "@react-native-website/lint-examples": "0.0.0",
     "@react-native-website/update-redirects": "0.0.0",
     "@types/google.analytics": "^0.0.46",
-    "@types/react": "^18.2.79",
+    "@types/react": "^19.1.10",
     "alex": "^11.0.1",
     "case-police": "^1.0.0",
     "eslint": "^8.57.1",
     "fs-extra": "^11.2.0",
     "glob": "^11.0.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
     "remark-cli": "^12.0.1",
-    "typescript": "^5.7.2"
+    "typescript": "^5.9.2"
   }
 }

website/src/css/_shared.scss

@@ -7,42 +7,36 @@
 
 %link-style {
   display: initial;
-  color: var(--ifm-font-color-base);
-  background-color: rgba(187, 239, 253, 0.3);
   line-height: calc(var(--ifm-font-size-base) + 4px);
-  border-bottom: 1px solid var(--ifm-hr-border-color);
+  border-bottom: 1px solid transparent;
+  transition: border-color 0.15s;
 
   &:hover {
-    background-color: rgba(187, 239, 253, 0.6);
+    border-bottom-color: var(--ifm-color-primary-75);
   }
 }
 
 %link-style-dark {
-  background-color: rgba(97, 218, 251, 0.12);
-  border-bottom-color: rgba(97, 218, 251, 0.3);
+  color: var(--brand);
 
   &:hover {
-    background-color: rgba(97, 218, 251, 0.4);
-    border-bottom-color: var(--brand);
+    border-bottom-color: var(--ifm-color-primary-75);
   }
 }
 
 %hash-link-style {
-  background-color: transparent;
-  border-bottom: 0;
-  color: var(--subtle);
-
-  &:hover {
-    background-color: transparent;
-    color: var(--brand);
+  &,
+  &::before {
+    color: var(--subtle);
+    border-bottom: 0 !important;
   }
 }
 
 %button-link-style {
   display: inline-block;
   padding: 8px 16px;
   border: 1px solid var(--ifm-color-emphasis-300);
-  border-radius: var(--ifm-global-radius);
+  border-radius: 32px;
   color: var(--ifm-color-content-secondary);
 
   &:hover {