Fix dependencies, create config packages, and implement depcheck --fix-errors (#3948)

* create a more robust depcheck implementation

* fix missing eslint config dependencies

* apply depcheck fix to directories to fix error level issues

* fix missing deps for private packages

* applying package updates

* JSX runtime (part 2 of 3) - more formal rendering logic for both classic and new jsx runtimes (#3947)

* rework jsx helpers for both new and old runtimes

* implement both new and old render patterns for classic and jsx-runtimes

* Change files

* move package README.md files to be next to the source code

* update documentation

* Change files

* prettier format updates to documentation

* tweak documentation just a bit

* applying package updates

* apply more dependency fixes

* JSX runtime (part 2 of 3) - more formal rendering logic for both classic and new jsx runtimes (#3947)

* rework jsx helpers for both new and old runtimes

* implement both new and old render patterns for classic and jsx-runtimes

* Change files

* move package README.md files to be next to the source code

* update documentation

* Change files

* prettier format updates to documentation

* tweak documentation just a bit

* applying package updates

* switch to pnpm and fix to build stage

* fix dependencies up through linting

* fix babel and jest configs and add dedicated babel config package

* split jest configurations into a separate package

* fix more tests

* move repo to pnpm, create babel and jest config packages, fix dependencies

* Change files

* add missing @types/jest devDependency

* fix ios/mac pod install

* fix align-deps issue

* fix more align-deps / depcheck issues

* switch back to node-modules temporarily to deal with appium issues as a separate pr

* add build fixes for node-modules linking

* revert podfiles to non-pnpm behavior, fix prettier issues, respond to PR feedback

---------

Co-authored-by: UI-Fabric-RN-Bot <uifrnbot@microsoft.com>

Author: JasonVMo

.yarnrc.yml

@@ -4,9 +4,18 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
+packageExtensions:
+  "@svgr/core@*":
+    dependencies:
+      "@svgr/plugin-jsx": "*"
+      "@svgr/plugin-svgo": "*"
+  react-native-svg@*:
+    dependencies:
+      buffer: "*"
+
 plugins:
   - checksum: 672e525b81762c6162366bd3ffec5e86ab8fac2655ef0267047e86a0f32e79a4bde0f170bc30479663f40aa3f006d91f8dc3289f679dd4dc5ae5a5d12ba3ad0b
     path: .yarn/plugins/@rnx-kit/yarn-plugin-dynamic-extensions.cjs
-    spec: 'https://raw.githubusercontent.com/microsoft/rnx-kit/main/incubator/yarn-plugin-dynamic-extensions/index.js'
+    spec: "https://raw.githubusercontent.com/microsoft/rnx-kit/main/incubator/yarn-plugin-dynamic-extensions/index.js"
 
 yarnPath: .yarn/releases/yarn-4.9.2.cjs

apps/E2E/tsconfig.json

@@ -2,7 +2,6 @@
   "extends": "@fluentui-react-native/scripts/configs/tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "importHelpers": true,
     "outDir": "lib",
     "paths": {
       "*": ["*", "*.win32", "./*"],

apps/component-generator/component-templates/ComponentTemplate/babel.config.js

@@ -1 +1 @@
-module.exports = require('@fluentui-react-native/scripts/configs/babel.config');
+module.exports = require('@fluentui-react-native/babel-config');

apps/component-generator/component-templates/ComponentTemplate/jest.config.js

@@ -1,2 +1,2 @@
-const { configureReactNativeJest } = require('@fluentui-react-native/scripts');
+const { configureReactNativeJest } = require('@fluentui-react-native/jest-config');
 module.exports = configureReactNativeJest('android');

apps/component-generator/component-templates/ComponentTemplate/package.json

@@ -24,7 +24,9 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@fluentui-react-native/babel-config": "workspace:*",
     "@fluentui-react-native/eslint-config-rules": "workspace:*",
+    "@fluentui-react-native/jest-config": "workspace:*",
     "@fluentui-react-native/test-tools": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
     "react": "18.2.0",

apps/fluent-tester/ios/Podfile

@@ -1,15 +1,15 @@
+# (pnpm-mode) ENV['REACT_NATIVE_NODE_MODULES_DIR'] = File.join(__dir__, '../node_modules')
+
+# (pnpm-mode) require_relative '../node_modules/react-native-test-app/test_app'
 require_relative '../../../node_modules/react-native-test-app/test_app'
 
 workspace 'FluentTester.xcworkspace'
 
+# (pnpm-mode) react_native_path = "#{__dir__}/../node_modules/react-native"
 react_native_path = "#{__dir__}/../../../node_modules/react-native"
 
 use_test_app! do |target|
   target.app do
     platform :ios, '15.0'
-
-    # There is a bug where autolinking isn't working, so specify these manually.
-    pod 'FRNAppearanceAdditions', :path => '../../../packages/experimental/AppearanceAdditions/FRNAppearanceAdditions.podspec'
-    pod 'FRNFontMetrics', :path => '../../../packages/experimental/NativeFontMetrics/FRNFontMetrics.podspec'
   end
 end

apps/fluent-tester/ios/Podfile.lock

@@ -3,15 +3,15 @@ PODS:
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.74.7)
   - fmt (9.1.0)
-  - FRNAppearanceAdditions (0.7.2):
+  - FRNAppearanceAdditions (0.7.11):
     - React
-  - FRNAvatar (0.21.4):
+  - FRNAvatar (0.21.13):
     - MicrosoftFluentUI (= 0.13.1)
     - React
-  - FRNDatePicker (0.11.0):
+  - FRNDatePicker (0.11.4):
     - MicrosoftFluentUI (= 0.13.1)
     - React
-  - FRNFontMetrics (0.6.0):
+  - FRNFontMetrics (0.6.4):
     - React
   - glog (0.3.5)
   - MicrosoftFluentUI (0.13.1):
@@ -1080,7 +1080,7 @@ PODS:
     - React-debug
   - react-native-menu (0.7.3):
     - React
-  - react-native-slider (4.5.3):
+  - react-native-slider (4.5.7):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -1351,10 +1351,10 @@ DEPENDENCIES:
   - DoubleConversion (from `../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../../../node_modules/react-native/Libraries/FBLazyVector`)
   - fmt (from `../../../node_modules/react-native/third-party-podspecs/fmt.podspec`)
-  - FRNAppearanceAdditions (from `../../../packages/experimental/AppearanceAdditions/FRNAppearanceAdditions.podspec`)
-  - "FRNAvatar (from `../../../node_modules/@fluentui-react-native/experimental-avatar`)"
-  - "FRNDatePicker (from `../../../node_modules/@fluentui-react-native/experimental-native-date-picker`)"
-  - FRNFontMetrics (from `../../../packages/experimental/NativeFontMetrics/FRNFontMetrics.podspec`)
+  - "FRNAppearanceAdditions (from `../node_modules/@fluentui-react-native/experimental-appearance-additions`)"
+  - "FRNAvatar (from `../node_modules/@fluentui-react-native/experimental-avatar`)"
+  - "FRNDatePicker (from `../node_modules/@fluentui-react-native/experimental-native-date-picker`)"
+  - "FRNFontMetrics (from `../node_modules/@fluentui-react-native/experimental-native-font-metrics`)"
   - glog (from `../../../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - RCT-Folly (from `../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCT-Folly/Fabric (from `../../../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
@@ -1428,13 +1428,13 @@ EXTERNAL SOURCES:
   fmt:
     :podspec: "../../../node_modules/react-native/third-party-podspecs/fmt.podspec"
   FRNAppearanceAdditions:
-    :path: "../../../packages/experimental/AppearanceAdditions/FRNAppearanceAdditions.podspec"
+    :path: "../node_modules/@fluentui-react-native/experimental-appearance-additions"
   FRNAvatar:
-    :path: "../../../node_modules/@fluentui-react-native/experimental-avatar"
+    :path: "../node_modules/@fluentui-react-native/experimental-avatar"
   FRNDatePicker:
-    :path: "../../../node_modules/@fluentui-react-native/experimental-native-date-picker"
+    :path: "../node_modules/@fluentui-react-native/experimental-native-date-picker"
   FRNFontMetrics:
-    :path: "../../../packages/experimental/NativeFontMetrics/FRNFontMetrics.podspec"
+    :path: "../node_modules/@fluentui-react-native/experimental-native-font-metrics"
   glog:
     :podspec: "../../../node_modules/react-native/third-party-podspecs/glog.podspec"
   RCT-Folly:
@@ -1551,10 +1551,10 @@ SPEC CHECKSUMS:
   DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   FBLazyVector: 04dc972982abebd96d823752c3a426bbe6ac397f
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
-  FRNAppearanceAdditions: 203a3fb8929b3fe0e1d9256a5a4d88c7116fdcb9
-  FRNAvatar: ec4d219c71bfd3d74306a1fcf94f71393b63359f
-  FRNDatePicker: 6ddae28f04880d89fc609dc791943943dabba718
-  FRNFontMetrics: 2cb281cc763879e4c5e5d3b3ed662181689e8939
+  FRNAppearanceAdditions: 9d37ce1ce2df3559d0616234557b024774e59a92
+  FRNAvatar: 3616c78fb72770b8d972619cb9d8b9a841e6d07f
+  FRNDatePicker: b1dc2056dcb52614e1a1fd4054115a33130d334e
+  FRNFontMetrics: 4d90cf418139e1b8ad202cd190b76f36bd027eef
   glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
   MicrosoftFluentUI: dde98d8ed3fc306d9ddd0a6f0bc0c1f24fe5275e
   RCT-Folly: 5dc73daec3476616d19e8a53f0156176f7b55461
@@ -1582,7 +1582,7 @@ SPEC CHECKSUMS:
   React-logger: 58cd5ca2c3ab03a06b33e6d46a210d2b17ca116d
   React-Mapbuffer: f245095650540b8ddd09ac907a79605f68b1f4d4
   react-native-menu: 166490a809e627736b2dd887a564e8e6f093d128
-  react-native-slider: fb9f245bfade8fe24998f88133e06c5110853868
+  react-native-slider: ef3da51d021999dc76a1efefae60176ac4910c36
   React-nativeconfig: 3b359be06d9ee8d64c1eacbca4f1040f331573fd
   React-NativeModulesApple: c6259e85e61f211854e632ed3eb21f25e15651f4
   React-perflogger: e9ebfc705cb9f60ef5d471637350ccab7abd0444
@@ -1613,6 +1613,6 @@ SPEC CHECKSUMS:
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 9db4b2da1ed5d8e0c94158f9ac379c8b1b529f59
 
-PODFILE CHECKSUM: fae4d25651430550ed89e2c0320a71f5f1d40f44
+PODFILE CHECKSUM: da2b0060460364a6479fbaf8e70713ef63c09b0b
 
 COCOAPODS: 1.16.2

apps/fluent-tester/macos/Podfile

@@ -1,18 +1,15 @@
+# (pnpm-mode) ENV['REACT_NATIVE_NODE_MODULES_DIR'] = File.join(__dir__, '../node_modules')
+
+# require_relative '../node_modules/react-native-test-app/macos/test_app'
 require_relative '../../../node_modules/react-native-test-app/macos/test_app'
 
 workspace 'FluentTester.xcworkspace'
 
+# (pnpm-mode) react_native_path = "#{__dir__}/../node_modules/react-native"
 react_native_path = "#{__dir__}/../../../node_modules/react-native"
 
 use_test_app! do |target|
   target.app do
     platform :osx, '12'
-
-    # There is a bug where autolinking isn't working, do specify these manually.
-    pod 'FRNAvatar', :path => '../../../packages/experimental/Avatar/FRNAvatar.podspec'
-    pod 'FRNCheckbox', :path => '../../../packages/experimental/Checkbox/FRNCheckbox.podspec'
-    pod 'FRNMenuButton', :path => '../../../packages/components/MenuButton/FRNMenuButton.podspec'
-    pod 'FRNRadioButton', :path => '../../../packages/components/RadioGroup/FRNRadioButton.podspec'
-    pod 'RCTFocusZone', :path => '../../../packages/components/FocusZone/RCTFocusZone.podspec'
   end
 end

apps/fluent-tester/macos/Podfile.lock

@@ -3,10 +3,10 @@ PODS:
   - DoubleConversion (1.1.6)
   - FBLazyVector (0.74.30)
   - fmt (9.1.0)
-  - FRNAvatar (0.21.11):
+  - FRNAvatar (0.21.13):
     - MicrosoftFluentUI (= 0.13.1)
     - React
-  - FRNCallout (0.27.9):
+  - FRNCallout (0.27.11):
     - DoubleConversion
     - glog
     - RCT-Folly (= 2024.01.01.00)
@@ -28,11 +28,11 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - FRNCheckbox (0.17.16):
+  - FRNCheckbox (0.17.18):
     - React
-  - FRNMenuButton (0.13.26):
+  - FRNMenuButton (0.13.28):
     - React
-  - FRNRadioButton (0.21.23):
+  - FRNRadioButton (0.21.25):
     - React
   - FRNVibrancyView (0.3.4):
     - React
@@ -123,7 +123,7 @@ PODS:
     - fmt (= 9.1.0)
     - glog
   - RCTDeprecation (0.74.30)
-  - RCTFocusZone (0.21.7):
+  - RCTFocusZone (0.21.9):
     - React
   - RCTRequired (0.74.30)
   - RCTTypeSafety (0.74.30):
@@ -1261,17 +1261,17 @@ DEPENDENCIES:
   - DoubleConversion (from `../../../node_modules/react-native-macos/third-party-podspecs/DoubleConversion.podspec`)
   - FBLazyVector (from `../../../node_modules/react-native-macos/Libraries/FBLazyVector`)
   - fmt (from `../../../node_modules/react-native-macos/third-party-podspecs/fmt.podspec`)
-  - FRNAvatar (from `../../../packages/experimental/Avatar/FRNAvatar.podspec`)
+  - "FRNAvatar (from `../node_modules/@fluentui-react-native/experimental-avatar`)"
   - "FRNCallout (from `../node_modules/@fluentui-react-native/callout`)"
-  - FRNCheckbox (from `../../../packages/experimental/Checkbox/FRNCheckbox.podspec`)
-  - FRNMenuButton (from `../../../packages/components/MenuButton/FRNMenuButton.podspec`)
-  - FRNRadioButton (from `../../../packages/components/RadioGroup/FRNRadioButton.podspec`)
+  - "FRNCheckbox (from `../node_modules/@fluentui-react-native/experimental-checkbox`)"
+  - "FRNMenuButton (from `../node_modules/@fluentui-react-native/menu-button`)"
+  - "FRNRadioButton (from `../node_modules/@fluentui-react-native/radio-group`)"
   - "FRNVibrancyView (from `../node_modules/@fluentui-react-native/vibrancy-view`)"
   - glog (from `../../../node_modules/react-native-macos/third-party-podspecs/glog.podspec`)
   - RCT-Folly (from `../../../node_modules/react-native-macos/third-party-podspecs/RCT-Folly.podspec`)
   - RCT-Folly/Fabric (from `../../../node_modules/react-native-macos/third-party-podspecs/RCT-Folly.podspec`)
   - RCTDeprecation (from `../../../node_modules/react-native-macos/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
-  - RCTFocusZone (from `../../../packages/components/FocusZone/RCTFocusZone.podspec`)
+  - "RCTFocusZone (from `../node_modules/@fluentui-react-native/focus-zone`)"
   - RCTRequired (from `../../../node_modules/react-native-macos/Libraries/Required`)
   - RCTTypeSafety (from `../../../node_modules/react-native-macos/Libraries/TypeSafety`)
   - React (from `../../../node_modules/react-native-macos/`)
@@ -1339,15 +1339,15 @@ EXTERNAL SOURCES:
   fmt:
     :podspec: "../../../node_modules/react-native-macos/third-party-podspecs/fmt.podspec"
   FRNAvatar:
-    :path: "../../../packages/experimental/Avatar/FRNAvatar.podspec"
+    :path: "../node_modules/@fluentui-react-native/experimental-avatar"
   FRNCallout:
     :path: "../node_modules/@fluentui-react-native/callout"
   FRNCheckbox:
-    :path: "../../../packages/experimental/Checkbox/FRNCheckbox.podspec"
+    :path: "../node_modules/@fluentui-react-native/experimental-checkbox"
   FRNMenuButton:
-    :path: "../../../packages/components/MenuButton/FRNMenuButton.podspec"
+    :path: "../node_modules/@fluentui-react-native/menu-button"
   FRNRadioButton:
-    :path: "../../../packages/components/RadioGroup/FRNRadioButton.podspec"
+    :path: "../node_modules/@fluentui-react-native/radio-group"
   FRNVibrancyView:
     :path: "../node_modules/@fluentui-react-native/vibrancy-view"
   glog:
@@ -1357,7 +1357,7 @@ EXTERNAL SOURCES:
   RCTDeprecation:
     :path: "../../../node_modules/react-native-macos/ReactApple/Libraries/RCTFoundation/RCTDeprecation"
   RCTFocusZone:
-    :path: "../../../packages/components/FocusZone/RCTFocusZone.podspec"
+    :path: "../node_modules/@fluentui-react-native/focus-zone"
   RCTRequired:
     :path: "../../../node_modules/react-native-macos/Libraries/Required"
   RCTTypeSafety:
@@ -1466,17 +1466,17 @@ SPEC CHECKSUMS:
   DoubleConversion: 5b92c4507c560bb62e7aa1acdf2785ea3ff08b3b
   FBLazyVector: 0aa0591844f7fe4736f3aba70d30232edbd21eb5
   fmt: 03574da4b7ba40de39da59677ca66610ce8c4a02
-  FRNAvatar: 1eccbe629f3034e2caa11f62e16db120ac3c7836
-  FRNCallout: 3eca65ff4ee29de3881a8402842b230626024ff6
-  FRNCheckbox: 1d87e81b71e6706b6e94e69ab6923e50755c4a29
-  FRNMenuButton: d87749093d3418d9c9377144f9e17e09af707335
-  FRNRadioButton: 8b6c2d6c2d5c513ce493568ac0597d114359cb57
+  FRNAvatar: 3616c78fb72770b8d972619cb9d8b9a841e6d07f
+  FRNCallout: b91d07ae396f69e77b8b2ae71501d6b6494254fa
+  FRNCheckbox: 23027d19870f99006ddb8eaa129f0f2af95a374c
+  FRNMenuButton: 5c58612fa8480cfc47f299755d5daf410dc1c4e1
+  FRNRadioButton: 400c56cbcafe7d2b7df5481fdba963e4ee868edd
   FRNVibrancyView: 0fb5d289c2a4b934596fb26d81166151d66fa28c
   glog: ba31c1afa7dcf1915a109861bccdb4421be6175b
   MicrosoftFluentUI: dde98d8ed3fc306d9ddd0a6f0bc0c1f24fe5275e
   RCT-Folly: f47da9a444aae485a0528b3bccf0336156009d60
   RCTDeprecation: 6c1d8fdaf3e34933c33a56531bd984bc2d22ef9e
-  RCTFocusZone: 999b4c2acb2193fd189f9ef6d1e970c2a6676250
+  RCTFocusZone: 80f74daff8795ecfe3c7987c99afdd3b7545191c
   RCTRequired: 5266165e3b6c7ca1554c5a75fb4c1ebe1bc60b53
   RCTTypeSafety: ced894df76a17b8f7331d24e2efa862a7a616e89
   React: 620dbf1e10232c8517a8b89d0def5b29e04ad24e
@@ -1529,6 +1529,6 @@ SPEC CHECKSUMS:
   SocketRocket: f6c6249082c011e6de2de60ed641ef8bbe0cfac9
   Yoga: bd03cda842f416ba4c2d4b79fcd0fd27e917b91e
 
-PODFILE CHECKSUM: 1c580785758db094d8282f8e1360afc97dfac817
+PODFILE CHECKSUM: 820f3959373af874ba70e1313bf6680f1a037104
 
 COCOAPODS: 1.16.2

apps/fluent-tester/metro.config.js

@@ -27,7 +27,7 @@ function ensureUniqueModule(moduleName, excludeList, nodeModules) {
 }
 
 // build up the added excludes and extraNodeModules
-['react-is', 'invariant', '@babel/runtime', 'base64-js'].forEach((moduleName) => ensureUniqueModule(moduleName));
+['react-native-svg'].forEach((moduleName) => ensureUniqueModule(moduleName));
 
 const blockList = exclusionList([
   // This stops "react-native run-windows" from causing the metro server to