feat: Add unified fluentui-react-native mono-package with subpath exports and migration codemod

apps/fluent-tester/package.json

@@ -10,8 +10,6 @@
     "url": "https://github.com/microsoft/fluentui-react-native.git",
     "directory": "apps/fluent-tester"
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "exports": {
     ".": {
@@ -24,7 +22,6 @@
   "scripts": {
     "android": "rnx-cli run --platform android",
     "build": "fluentui-scripts build",
-    "build-cjs": "tsgo --outDir lib-commonjs",
     "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
     "bundle": "rnx-cli bundle --dev false",
     "bundle:android": "rnx-cli bundle --dev false --platform android",
@@ -54,23 +51,10 @@
     "@babel/core": "catalog:",
     "@babel/runtime": "catalog:",
     "@fluentui-react-native/babel-config": "workspace:*",
-    "@fluentui-react-native/callout": "workspace:*",
     "@fluentui-react-native/eslint-config-rules": "workspace:*",
-    "@fluentui-react-native/experimental-appearance-additions": "workspace:*",
-    "@fluentui-react-native/experimental-avatar": "workspace:*",
-    "@fluentui-react-native/experimental-checkbox": "workspace:*",
-    "@fluentui-react-native/experimental-expander": "workspace:*",
-    "@fluentui-react-native/experimental-native-date-picker": "workspace:*",
-    "@fluentui-react-native/experimental-native-font-metrics": "workspace:*",
-    "@fluentui-react-native/experimental-shimmer": "workspace:*",
-    "@fluentui-react-native/focus-zone": "workspace:*",
     "@fluentui-react-native/kit-config": "workspace:*",
-    "@fluentui-react-native/menu-button": "workspace:*",
-    "@fluentui-react-native/radio-group": "workspace:*",
     "@fluentui-react-native/scripts": "workspace:*",
     "@fluentui-react-native/tester-core": "workspace:*",
-    "@fluentui-react-native/tooltip": "workspace:*",
-    "@fluentui-react-native/vibrancy-view": "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",
@@ -106,9 +90,7 @@
   },
   "furn": {
     "depcheck": {
-      "ignoreMatches": [
-        "@fluentui-react-native/experimental-expander"
-      ]
+      "ignoreMatches": []
     }
   },
   "rnx-kit": {

apps/fluent-tester/tsconfig.json

@@ -2,6 +2,8 @@
   "extends": "@fluentui-react-native/scripts/configs/tsconfig.json",
   "compilerOptions": {
     "outDir": "lib",
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true,
     "types": ["@types/jasmine", "@wdio/globals/types", "@wdio/jasmine-framework", "node"]
   },

apps/tester-core/package.json

@@ -11,85 +11,35 @@
     "url": "https://github.com/microsoft/fluentui-react-native.git",
     "directory": "apps/fluent-tester-core"
   },
-  "main": "lib-commonjs/index.js",
-  "module": "lib/index.js",
+  "type": "module",
   "types": "lib/index.d.ts",
   "exports": {
     ".": {
       "types": "./lib/index.d.ts",
       "import": "./lib/index.js",
-      "require": "./lib-commonjs/index.js",
       "default": "./src/index.ts"
     }
   },
   "scripts": {
     "build": "fluentui-scripts build",
-    "build-cjs": "tsgo --outDir lib-commonjs",
-    "build-core": "tsgo --outDir lib --module esnext --moduleResolution bundler",
+    "build-core": "tsgo --outDir lib",
     "clean": "fluentui-scripts clean",
     "depcheck": "fluentui-scripts depcheck",
     "format": "fluentui-scripts format",
     "lint": "fluentui-scripts eslint",
     "lint-package": "fluentui-scripts lint-package"
   },
   "dependencies": {
-    "@fluentui-react-native/adapters": "workspace:*",
-    "@fluentui-react-native/android-theme": "workspace:*",
-    "@fluentui-react-native/apple-theme": "workspace:*",
-    "@fluentui-react-native/avatar": "workspace:*",
-    "@fluentui-react-native/badge": "workspace:*",
-    "@fluentui-react-native/button": "workspace:*",
-    "@fluentui-react-native/callout": "workspace:*",
-    "@fluentui-react-native/chip": "workspace:*",
-    "@fluentui-react-native/default-theme": "workspace:*",
-    "@fluentui-react-native/divider": "workspace:*",
-    "@fluentui-react-native/drawer": "workspace:*",
-    "@fluentui-react-native/dropdown": "workspace:*",
     "@fluentui-react-native/e2e-testing": "workspace:*",
-    "@fluentui-react-native/experimental-activity-indicator": "workspace:*",
-    "@fluentui-react-native/experimental-appearance-additions": "workspace:*",
-    "@fluentui-react-native/experimental-avatar": "workspace:*",
-    "@fluentui-react-native/experimental-checkbox": "workspace:*",
-    "@fluentui-react-native/experimental-expander": "workspace:*",
-    "@fluentui-react-native/experimental-menu-button": "workspace:*",
-    "@fluentui-react-native/experimental-native-date-picker": "workspace:*",
-    "@fluentui-react-native/experimental-native-font-metrics": "workspace:*",
-    "@fluentui-react-native/experimental-shadow": "workspace:*",
-    "@fluentui-react-native/experimental-shimmer": "workspace:*",
-    "@fluentui-react-native/focus-zone": "workspace:*",
-    "@fluentui-react-native/framework": "workspace:*",
-    "@fluentui-react-native/framework-base": "workspace:*",
-    "@fluentui-react-native/icon": "workspace:*",
-    "@fluentui-react-native/input": "workspace:*",
-    "@fluentui-react-native/interactive-hooks": "workspace:*",
-    "@fluentui-react-native/menu": "workspace:*",
-    "@fluentui-react-native/menu-button": "workspace:*",
-    "@fluentui-react-native/notification": "workspace:*",
-    "@fluentui-react-native/overflow": "workspace:*",
-    "@fluentui-react-native/radio-group": "workspace:*",
-    "@fluentui-react-native/separator": "workspace:*",
-    "@fluentui-react-native/spinner": "workspace:*",
-    "@fluentui-react-native/stack": "workspace:*",
-    "@fluentui-react-native/switch": "workspace:*",
-    "@fluentui-react-native/tablist": "workspace:*",
-    "@fluentui-react-native/text": "workspace:*",
-    "@fluentui-react-native/theme": "workspace:*",
-    "@fluentui-react-native/theme-tokens": "workspace:*",
-    "@fluentui-react-native/theme-types": "workspace:*",
-    "@fluentui-react-native/themed-stylesheet": "workspace:*",
-    "@fluentui-react-native/theming-utils": "workspace:*",
-    "@fluentui-react-native/tooltip": "workspace:*",
-    "@fluentui-react-native/vibrancy-view": "workspace:*",
-    "@fluentui-react-native/win32-theme": "workspace:*",
-    "@fluentui/react-native": "workspace:*",
     "@fluentui/react-native-icons": "^2.0.316",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
     "@react-native-community/slider": "^4.5.7",
     "@react-native-menu/menu": "^0.7.3",
     "@react-native-picker/picker": "^2.7.0",
-    "@types/node": "catalog:"
+    "@types/node": "catalog:",
+    "fluentui-react-native": "workspace:*"
   },
   "devDependencies": {
     "@babel/core": "catalog:",
@@ -131,20 +81,7 @@
     "webdriverio": "catalog:"
   },
   "peerDependencies": {
-    "@fluentui-react-native/callout": "workspace:*",
-    "@fluentui-react-native/experimental-appearance-additions": "workspace:*",
-    "@fluentui-react-native/experimental-avatar": "workspace:*",
-    "@fluentui-react-native/experimental-checkbox": "workspace:*",
-    "@fluentui-react-native/experimental-expander": "workspace:*",
-    "@fluentui-react-native/experimental-native-date-picker": "workspace:*",
-    "@fluentui-react-native/experimental-native-font-metrics": "workspace:*",
-    "@fluentui-react-native/experimental-shimmer": "workspace:*",
-    "@fluentui-react-native/focus-zone": "workspace:*",
-    "@fluentui-react-native/menu-button": "workspace:*",
-    "@fluentui-react-native/radio-group": "workspace:*",
     "@fluentui-react-native/tester-core": "workspace:*",
-    "@fluentui-react-native/tooltip": "workspace:*",
-    "@fluentui-react-native/vibrancy-view": "workspace:*",
     "@office-iss/react-native-win32": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0",
     "@types/react": "~18.2.0 || ~19.0.0 || ~19.1.4",
     "react": "18.2.0 || 19.0.0 || 19.1.4",
@@ -154,42 +91,6 @@
     "react-native-windows": "^0.73.0 || ^0.74.0 || ^0.78.0 || ^0.81.0"
   },
   "peerDependenciesMeta": {
-    "@fluentui-react-native/callout": {
-      "optional": true
-    },
-    "@fluentui-react-native/experimental-appearance-additions": {
-      "optional": true
-    },
-    "@fluentui-react-native/experimental-avatar": {
-      "optional": true
-    },
-    "@fluentui-react-native/experimental-checkbox": {
-      "optional": true
-    },
-    "@fluentui-react-native/experimental-expander": {
-      "optional": true
-    },
-    "@fluentui-react-native/experimental-native-date-picker": {
-      "optional": true
-    },
-    "@fluentui-react-native/experimental-native-font-metrics": {
-      "optional": true
-    },
-    "@fluentui-react-native/experimental-shimmer": {
-      "optional": true
-    },
-    "@fluentui-react-native/menu-button": {
-      "optional": true
-    },
-    "@fluentui-react-native/radio-group": {
-      "optional": true
-    },
-    "@fluentui-react-native/tooltip": {
-      "optional": true
-    },
-    "@fluentui-react-native/vibrancy-view": {
-      "optional": true
-    },
     "@office-iss/react-native-win32": {
       "optional": true
     },
@@ -208,9 +109,7 @@
   },
   "furn": {
     "depcheck": {
-      "ignoreMatches": [
-        "@fluentui-react-native/experimental-expander"
-      ]
+      "ignoreMatches": []
     }
   },
   "rnx-kit": {

apps/tester-core/src/FluentTester.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import { ScrollView, View, Text as RNText, Platform, SafeAreaView, BackHandler, I18nManager } from 'react-native';
 
-import { Separator, TextV1 as Text } from '@fluentui/react-native';
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Separator } from 'fluentui-react-native/separator';
+import { TextV1 as Text } from 'fluentui-react-native/text';
+import { ButtonV1 as Button } from 'fluentui-react-native/button';
 import { BASE_TESTPAGE, TESTPAGE_BUTTONS_SCROLLVIEWER, TESTPAGE_CONTENT_SCROLLVIEWER } from '@fluentui-react-native/e2e-testing';
 import { ROOT_VIEW } from '@fluentui-react-native/e2e-testing';
-import type { Theme } from '@fluentui-react-native/framework';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import type { Theme } from 'fluentui-react-native/framework';
+import { useTheme } from 'fluentui-react-native/theme-types';
+import { themedStyleSheet } from 'fluentui-react-native/themed-stylesheet';
 
 import { fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles';
 import { testProps } from './TestComponents/Common/TestProps';

apps/tester-core/src/FluentTesterApp.tsx

@@ -7,8 +7,8 @@
 
 import { Platform } from 'react-native';
 
-import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions';
-import { ThemeReference, ThemeProvider } from '@fluentui-react-native/theme';
+import { useHorizontalSizeClass } from 'fluentui-react-native/experimental-appearance-additions';
+import { ThemeReference, ThemeProvider } from 'fluentui-react-native/theme';
 
 import type { FluentTesterProps } from './FluentTester';
 import { FluentTester } from './FluentTester';

apps/tester-core/src/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { View, Switch } from 'react-native';
 
-import { Text } from '@fluentui/react-native';
+import { Text } from 'fluentui-react-native/text';
 import { ACTIVITY_INDICATOR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-indicator';
-import { Stack } from '@fluentui-react-native/stack';
+import { ActivityIndicator } from 'fluentui-react-native/experimental-activity-indicator';
+import { Stack } from 'fluentui-react-native/stack';
 
 import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
 import type { TestSection, PlatformStatus } from '../Test';

apps/tester-core/src/TestComponents/Avatar/BasicAvatar.android.tsx

@@ -2,11 +2,11 @@ import type { FunctionComponent } from 'react';
 import React from 'react';
 import { View } from 'react-native';
 
-import { Avatar } from '@fluentui-react-native/avatar';
-import type { PresenceBadgeStatus } from '@fluentui-react-native/badge';
-import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
-import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import { Switch } from '@fluentui-react-native/switch';
+import { Avatar } from 'fluentui-react-native/avatar';
+import type { PresenceBadgeStatus } from 'fluentui-react-native/badge';
+import { PresenceBadgeStatuses } from 'fluentui-react-native/badge';
+import type { InteractionEvent } from 'fluentui-react-native/interactive-hooks';
+import { Switch } from 'fluentui-react-native/switch';
 
 import { StyledPicker } from '../Common/StyledPicker';
 import { mobileStyles } from '../Common/styles';

apps/tester-core/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -2,11 +2,11 @@ import { useState, useCallback } from 'react';
 import type { FunctionComponent } from 'react';
 import { View, Text, Platform } from 'react-native';
 
-import { ToggleButton } from '@fluentui/react-native';
-import type { AvatarSize, AvatarColor, AvatarActive } from '@fluentui-react-native/avatar';
-import { AvatarSizes, AvatarColors, Avatar } from '@fluentui-react-native/avatar';
-import type { PresenceBadgeStatus } from '@fluentui-react-native/badge';
-import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
+import { ToggleButton } from 'fluentui-react-native/button';
+import type { AvatarSize, AvatarColor, AvatarActive } from 'fluentui-react-native/avatar';
+import { AvatarSizes, AvatarColors, Avatar } from 'fluentui-react-native/avatar';
+import type { PresenceBadgeStatus } from 'fluentui-react-native/badge';
+import { PresenceBadgeStatuses } from 'fluentui-react-native/badge';
 
 import { svgProps } from '../Common/iconExamples';
 import { StyledPicker } from '../Common/StyledPicker';

apps/tester-core/src/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useMemo } from 'react';
 import { View, Text, TextInput, Platform, StyleSheet } from 'react-native';
 
-import { ToggleButton } from '@fluentui/react-native';
-import type { AvatarSize } from '@fluentui-react-native/avatar';
-import { Avatar } from '@fluentui-react-native/avatar';
-import type { FontWeight } from '@fluentui-react-native/theme-types';
+import { ToggleButton } from 'fluentui-react-native/button';
+import type { AvatarSize } from 'fluentui-react-native/avatar';
+import { Avatar } from 'fluentui-react-native/avatar';
+import type { FontWeight } from 'fluentui-react-native/theme-types';
 
 import { svgProps } from '../Common/iconExamples';
 import { commonTestStyles as commonStyles } from '../Common/styles';

apps/tester-core/src/TestComponents/Avatar/E2EAvatarTest.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-import { Avatar } from '@fluentui-react-native/avatar';
+import { Avatar } from 'fluentui-react-native/avatar';
 import {
   AVATAR_ACCESSIBILITY_HINT,
   AVATAR_ACCESSIBILITY_LABEL,

apps/tester-core/src/TestComponents/Avatar/NativeAvatarTest.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { Switch, View } from 'react-native';
 
-import { Text } from '@fluentui/react-native';
+import { Text } from 'fluentui-react-native/text';
 import { NATIVE_AVATAR_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import type { Size } from '@fluentui-react-native/experimental-avatar/';
-import { NativeAvatar } from '@fluentui-react-native/experimental-avatar/';
-import { Stack } from '@fluentui-react-native/stack';
+import type { Size } from 'fluentui-react-native/experimental-avatar';
+import { NativeAvatar } from 'fluentui-react-native/experimental-avatar';
+import { Stack } from 'fluentui-react-native/stack';
 
 import { testImageSource, rainbowGradientSource } from './testImageSources';
 import { commonTestStyles as commonStyles } from '../Common/styles';

apps/tester-core/src/TestComponents/Badge/BasicBadgeTest.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import { View, Platform, Image } from 'react-native';
 
-import { ToggleButton } from '@fluentui/react-native';
+import { ToggleButton } from 'fluentui-react-native/button';
 import type {
   BadgeAppearance,
   BadgeColor,
@@ -10,10 +10,10 @@ import type {
   BadgeIconPosition,
   BadgeProps,
   BadgeTokens,
-} from '@fluentui-react-native/badge';
-import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes } from '@fluentui-react-native/badge';
-import { useFluentTheme } from '@fluentui-react-native/framework';
-import { Text } from '@fluentui-react-native/text';
+} from 'fluentui-react-native/badge';
+import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes } from 'fluentui-react-native/badge';
+import { useFluentTheme } from 'fluentui-react-native/framework';
+import { Text } from 'fluentui-react-native/text';
 
 import { svgProps, iconProps } from '../Common/iconExamples';
 import { StyledPicker } from '../Common/StyledPicker';

apps/tester-core/src/TestComponents/Badge/CounterBadgeTest.android.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 
-import { CounterBadge } from '@fluentui-react-native/badge';
+import { CounterBadge } from 'fluentui-react-native/badge';
 
 export const CounterBadgeTest: React.FunctionComponent = () => {
   return (

apps/tester-core/src/TestComponents/Badge/CounterBadgeTest.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Platform, Text } from 'react-native';
 
-import { CounterBadge } from '@fluentui-react-native/badge';
+import { CounterBadge } from 'fluentui-react-native/badge';
 
 import { iconProps } from '../Common/iconExamples';
 

apps/tester-core/src/TestComponents/Badge/E2EBadgeTest.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
-import { Badge, PresenceBadge } from '@fluentui-react-native/badge';
+import { Badge, PresenceBadge } from 'fluentui-react-native/badge';
 import { BADGE_TEST_COMPONENT, BADGE_SECONDARY_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
 
 import { testProps } from '../Common/TestProps';