Fix dependencies, create config packages, and implement depcheck --fix-errors

.yarnrc.yml

@@ -2,7 +2,16 @@ dynamicPackageExtensions: ./scripts/dynamic.extensions.mjs
 
 enableGlobalCache: false
 
-nodeLinker: node-modules
+nodeLinker: pnpm
+
+packageExtensions:
+  '@svgr/core@*':
+    dependencies:
+      '@svgr/plugin-svgo': '*'
+      '@svgr/plugin-jsx': '*'
+  'react-native-svg@*':
+    dependencies:
+      'buffer': '*'
 
 plugins:
   - checksum: 672e525b81762c6162366bd3ffec5e86ab8fac2655ef0267047e86a0f32e79a4bde0f170bc30479663f40aa3f006d91f8dc3289f679dd4dc5ae5a5d12ba3ad0b

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,17 @@
-require_relative '../../../node_modules/react-native-test-app/test_app'
+ENV['REACT_NATIVE_NODE_MODULES_DIR'] = File.join(__dir__, '../node_modules')
+
+require_relative '../node_modules/react-native-test-app/test_app'
 
 workspace 'FluentTester.xcworkspace'
 
-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'
+    pod 'FRNAppearanceAdditions', :path => '../node_modules/@fluentui-react-native/experimental-appearance-additions/FRNAppearanceAdditions.podspec'
+    pod 'FRNFontMetrics', :path => '../node_modules/@fluentui-react-native/experimental-native-font-metrics/FRNFontMetrics.podspec'
   end
 end

apps/fluent-tester/macos/Podfile

@@ -1,18 +1,20 @@
-require_relative '../../../node_modules/react-native-test-app/macos/test_app'
+ENV['REACT_NATIVE_NODE_MODULES_DIR'] = File.join(__dir__, '../node_modules')
+
+require_relative '../node_modules/react-native-test-app/macos/test_app'
 
 workspace 'FluentTester.xcworkspace'
 
-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'
+    pod 'FRNAvatar', :path => '../node_modules/@fluentui-react-native/experimental-avatar/FRNAvatar.podspec'
+    pod 'FRNCheckbox', :path => '../node_modules/@fluentui-react-native/experimental-checkbox/FRNCheckbox.podspec'
+    pod 'FRNMenuButton', :path => '../node_modules/@fluentui-react-native/menu-button/FRNMenuButton.podspec'
+    pod 'FRNRadioButton', :path => '../node_modules/@fluentui-react-native/radio-group/FRNRadioButton.podspec'
+    pod 'RCTFocusZone', :path => '../node_modules/@fluentui-react-native/focus-zone/RCTFocusZone.podspec'
   end
 end

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

apps/fluent-tester/package.json

@@ -90,31 +90,37 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
     "@office-iss/react-native-win32": "^0.74.0",
-    "@react-native-community/slider": "^4.2.0",
+    "@react-native-community/slider": "^4.5.7",
     "@react-native-menu/menu": "^0.7.3",
     "@react-native-picker/picker": "^2.7.0",
+    "@types/node": "^22.0.0",
     "@types/react": "~18.2.0",
     "@warren-ms/react-native-icons": "^0.0.13",
     "react": "18.2.0",
     "react-native": "^0.74.0",
     "react-native-macos": "^0.74.0",
     "react-native-svg": "^15.4.0",
-    "react-native-windows": "^0.74.0",
-    "tslib": "^2.3.1"
+    "react-native-windows": "^0.74.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@fluentui-react-native/eslint-config-rules": "workspace:*",
+    "@fluentui-react-native/experimental-native-font-metrics": "workspace:*",
     "@fluentui-react-native/focus-zone": "workspace:*",
+    "@fluentui-react-native/menu-button": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
+    "@react-native-community/cli": "^13.6.4",
+    "@react-native-community/cli-platform-android": "^13.6.4",
+    "@react-native-community/cli-platform-ios": "^13.6.4",
     "@react-native/babel-preset": "^0.74.0",
     "@react-native/metro-babel-transformer": "^0.74.0",
     "@react-native/metro-config": "^0.74.0",
     "@rnx-kit/cli": "^0.18.9",
     "@rnx-kit/metro-config": "^2.1.0",
     "@rnx-kit/metro-resolver-symlinks": "^0.2.5",
     "@types/jasmine": "5.1.4",
+    "@types/react-test-renderer": "^18.2.0",
     "@wdio/cli": "^8.40.0",
     "@wdio/globals": "^8.40.0",
     "@wdio/jasmine-framework": "^8.40.0",
@@ -196,7 +202,8 @@
         "react",
         "react-test-renderer",
         "svg",
-        "test-app"
+        "test-app",
+        "community/cli"
       ]
     }
   },

apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -1,14 +1,17 @@
-import * as React from 'react';
+import React from 'react';
 import { Switch, View, Text, TextInput, StyleSheet } from 'react-native';
 
 import { PersonaCoin } from '@fluentui/react-native';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import Slider from '@react-native-community/slider';
+import type { SliderProps } from '@react-native-community/slider';
 
 import type { undefinedText } from './styles';
 import { steveBallmerPhotoUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 
+const NativeSlider = Slider as unknown as React.ComponentType<SliderProps>;
+
 type WithUndefined<T> = T | typeof undefinedText;
 
 const styles = StyleSheet.create({ slider: { ...commonStyles.vmargin, flex: 1 } });
@@ -19,7 +22,7 @@ const StyledSlider = (props) => {
   return (
     <View style={{ flexDirection: 'row' }}>
       <Text style={{ flex: 0.5, color: theme.colors.inputText }}>{title}</Text>
-      <Slider step={step || 1} minimumValue={min} maximumValue={max} value={initial} style={styles.slider} onValueChange={onChange} />
+      <NativeSlider step={step || 1} minimumValue={min} maximumValue={max} value={initial} style={styles.slider} onValueChange={onChange} />
       <Text style={{ flex: 0.2, color: theme.colors.inputText }}>{current}</Text>
     </View>
   );

apps/fluent-tester/tsconfig.json

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

apps/win32/metro.config.js

@@ -5,10 +5,21 @@
  * @format
  */
 // @ts-check
-const { makeMetroConfig } = require('@rnx-kit/metro-config');
+const { exclusionList, makeMetroConfig, resolveUniqueModule } = require('@rnx-kit/metro-config');
 const MetroSymlinksResolver = require('@rnx-kit/metro-resolver-symlinks');
 const { getDefaultConfig } = require('metro-config');
 
+const excludeMixins = [];
+const extraNodeModules = {};
+function ensureUniqueModule(moduleName, excludeList, nodeModules) {
+  const [nmEntry, excludePattern] = resolveUniqueModule(moduleName);
+  excludeMixins.push(excludePattern);
+  extraNodeModules[moduleName] = nmEntry;
+}
+
+// build up the added excludes and extraNodeModules
+['react-native-svg'].forEach((moduleName) => ensureUniqueModule(moduleName));
+
 module.exports = async () => {
   const {
     resolver: { sourceExts, assetExts },
@@ -17,6 +28,10 @@ module.exports = async () => {
   return makeMetroConfig({
     resolver: {
       assetExts: [...assetExts.filter((ext) => ext !== 'svg'), 'ttf', 'otf', 'png'],
+      blockList: exclusionList(excludeMixins),
+      extraNodeModules: {
+        ...extraNodeModules,
+      },
       sourceExts: [...sourceExts, 'svg'],
       resolveRequest: MetroSymlinksResolver(),
     },

apps/win32/package.json

@@ -37,8 +37,7 @@
     "@fluentui-react-native/tester": "workspace:*",
     "react": "18.2.0",
     "react-native": "^0.74.0",
-    "react-native-svg": "^15.4.0",
-    "tslib": "^2.3.1"
+    "react-native-svg": "^15.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
@@ -53,6 +52,7 @@
     "@rnx-kit/metro-config": "^2.1.0",
     "@rnx-kit/metro-resolver-symlinks": "^0.2.5",
     "@types/react": "^18.2.0",
+    "@types/react-test-renderer": "^18.2.0",
     "metro-config": "^0.80.3",
     "react-native-svg-transformer": "^1.0.0",
     "react-test-renderer": "18.2.0",

apps/win32/tsconfig.json

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

change/@fluentui-react-native-67f57b80-1a47-45d9-bf00-8de7aec7992e.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui/react-native",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-adapters-1e099a4d-89f8-4ff7-8a6c-35207b5c6201.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/adapters",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-android-theme-1515ddf2-094b-4c64-907b-a4f2d3c7179f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/android-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-apple-theme-9176009c-e48c-4c72-8636-a883171b0ad1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-avatar-f6d4b476-7f83-4df4-92e5-8622caf37035.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-badge-7ffe61c5-80ae-46c7-a07c-e515823a76e7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/badge",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-button-25db35a3-0f5b-4fd5-bca2-ef6b4e96ea58.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/button",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-callout-ce2e6dcc-15c9-4536-91db-c8c645d21a97.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-checkbox-15644ee6-e484-4179-9371-19381421d4d6.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-chip-cfeb65fd-609d-47f1-99fc-e5af48c29d37.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/chip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-codemods-13409971-43c7-424b-8b8d-3fb346a05f40.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/codemods",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-composition-369cdef8-4f80-4ab6-8db3-7741fe6756ab.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/composition",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-contextual-menu-39afd36b-014b-41e5-a595-e1ad2c90c4e1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/contextual-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-default-theme-9f4c765c-e033-43e4-b285-496c5eed855c.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/default-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-divider-1e15fb50-0e73-476a-90fd-103338be6ca4.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-drawer-07ea5922-d707-4a22-a9bb-8f3d4f7e004a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/drawer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-dropdown-18747c37-5b7f-4aa6-ae26-cadf53758a84.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/dropdown",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-e2e-testing-95c4ec4e-06de-47fb-9ac0-512ef7f42ad0.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "move repo to pnpm, create babel and jest config packages, fix dependencies",
+  "packageName": "@fluentui-react-native/e2e-testing",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}