Integrate dependency checker into CI and fix dependency errors (#392)

* add depcheck command to repo

* fix more dependencies

* fix dependency errors

* fix last few dependency issues

* more dependency fixes and integrate into buildci

* workaround depcheck bad report

* Change files

* add prettier and extension updates to (hopefully) ensure consistency

* fix bad merge

* Change files

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846
+  // for the documentation about the extensions.json format
+  "recommendations": [
+    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

.vscode/settings.json

@@ -1,26 +1,65 @@
 {
   "editor.formatOnSave": true,
+  "editor.detectIndentation": false,
   "editor.trimAutoWhitespace": true,
   "editor.insertSpaces": true,
   "editor.tabSize": 2,
+
+  "eslint.enable": true,
+  "eslint.workingDirectories": [{ "mode": "auto" }], // infer working directory based on .eslintrc/package.json location
+
   "files.trimTrailingWhitespace": true,
-  "json.format.enable": false,
-  "javascript.preferences.quoteStyle": "single",
-  "typescript.preferences.quoteStyle": "single",
-  "[handlebars]": {
-    "editor.formatOnSave": false
-  },
   "files.associations": {
     "**/package.json.hbs": "json",
     "**/*.json.hbs": "jsonc",
     "**/README.md.hbs": "markdown"
   },
-  "search.exclude": {
-    "**/node_modules": true,
-    "**/lib": true
-  },
   "files.exclude": {
     "**/lib-amd": true,
     "**/lib-commonjs": true
+  },
+  "files.watcherExclude": {
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/node_modules/**": true,
+    "**/.hg/store/**": true,
+    "**/lib": true,
+    "**/lib-commonjs": true,
+    "**/lib-amd": true
+  },
+
+  "javascript.preferences.quoteStyle": "single",
+
+  "json.format.enable": false,
+
+  "typescript.preferences.quoteStyle": "single",
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
+  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
+  "typescript.tsdk": "./node_modules/typescript/lib",
+
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/lib": true,
+    "**/lib-amd": true,
+    "**/lib-commonjs": true,
+    "**/dist": true
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[handlebars]": {
+    "editor.formatOnSave": false
   }
 }

apps/fluent-tester/package.json

@@ -13,6 +13,7 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "start": "fluentui-scripts metro --server",
     "test": "fluentui-scripts jest",
@@ -21,20 +22,11 @@
   "dependencies": {
     "@fluentui/react-native": ">=0.15.85 <1.0.0",
     "@fluentui-react-native/stack": ">=0.2.6 <1.0.0",
-    "@fluentui-react-native/button": ">=0.10.7 <1.0.0",
-    "@fluentui-react-native/separator": ">=0.4.6 <1.0.0",
-    "@fluentui-react-native/checkbox": ">=0.5.1 <1.0.0",
-    "@fluentui-react-native/text": ">=0.6.6 <1.0.0",
     "@fluentui-react-native/interactive-hooks": ">=0.5.0 <1.0.0",
-    "@fluentui-react-native/pressable": ">=0.3.83 <1.0.0",
-    "@fluentui-react-native/focus-trap-zone": ">=0.4.7 <1.0.0",
-    "@fluentui-react-native/link": ">=0.8.8 <1.0.0",
-    "@fluentui-react-native/radio-group": ">=0.4.4 <1.0.0",
-    "@fluentui-react-native/persona-coin": ">=0.3.82 <1.0.0",
-    "@fluentui-react-native/persona": ">=0.5.79 <1.0.0",
-    "@fluentui-react-native/contextual-menu": ">=0.3.7 <1.0.0",
     "@uifabricshared/theming-react-native": ">=0.7.74 <1.0.0",
+    "@uifabricshared/theme-registry": ">=0.3.68 <1.0.0",
     "@uifabricshared/themed-stylesheet": ">=0.3.67 <1.0.0",
+    "@uifabricshared/theming-ramp": ">=0.10.1 <1.0.0",
     "react-native-svg": "^11.0.0"
   },
   "devDependencies": {

apps/fluent-tester/src/RNTester/FabricTester.tsx

@@ -1,5 +1,4 @@
-import { StealthButton } from '@fluentui-react-native/button';
+import { StealthButton, Separator } from '@fluentui/react-native';
-import { Separator } from '@fluentui-react-native/separator';
 import { useTheme } from '@uifabricshared/theming-react-native';
 import * as React from 'react';
 import { Picker, ScrollView, View, Text } from 'react-native';
@@ -106,12 +105,11 @@ const Header: React.FunctionComponent<{}> = () => {
 }
 
 export const FabricTester: React.FunctionComponent<IFabricTesterProps> = (props: IFabricTesterProps) => {
-
   // sort tests alphabetically by name
   const sortedTestComponents = props.enabledTests.sort((a, b) => a.name.localeCompare(b.name));
 
   const { initialTest } = props;
-  const initialSelectedTestIndex = sortedTestComponents.findIndex(description => {
+  const initialSelectedTestIndex = sortedTestComponents.findIndex((description) => {
     return description.name === initialTest;
   });
 
@@ -122,8 +120,8 @@ export const FabricTester: React.FunctionComponent<IFabricTesterProps> = (props:
   const TestListSeparator = Separator.customize({
     tokens: {
       color: useTheme().colors.inputBorder,
-      separatorWidth: 2
+      separatorWidth: 2,
-    }
+    },
   });
 
   return (
@@ -158,4 +156,4 @@ export const FabricTester: React.FunctionComponent<IFabricTesterProps> = (props:
       </View>
     </View>
   );
-};
+};

apps/fluent-tester/src/RNTester/TestComponents/Button/ButtonFocusTest.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@fluentui-react-native/button';
+import { Button } from '@fluentui/react-native';
 import { IFocusable } from '@fluentui-react-native/interactive-hooks';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
@@ -7,7 +7,7 @@ import { stackStyle } from '../Common/styles';
 
 export const ButtonFocusTest: React.FunctionComponent<{}> = () => {
   const [state, setState] = React.useState({
-    focused: false
+    focused: false,
   });
   const buttonRef = React.useRef<IFocusable>(null);
 
@@ -17,7 +17,6 @@ export const ButtonFocusTest: React.FunctionComponent<{}> = () => {
       const node = findNodeHandle(buttonRef.current);
       console.log(node);
       buttonRef.current.focus();
-
     }
   }, [state, setState]);
 
@@ -27,4 +26,4 @@ export const ButtonFocusTest: React.FunctionComponent<{}> = () => {
       <Button content="Click to focus" onClick={onFocus} tooltip="button tooltip" />
     </Stack>
   );
-};
+};

apps/fluent-tester/src/RNTester/TestComponents/Button/ButtonIconTest.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@fluentui-react-native/button';
+import { Button } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { Platform, View, Text } from 'react-native';
@@ -22,4 +22,4 @@ export const ButtonIconTest: React.FunctionComponent<{}> = () => {
       </View>
     );
   }
-};
+};

apps/fluent-tester/src/RNTester/TestComponents/Checkbox/CheckboxTest.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from '@fluentui-react-native/checkbox';
+import { Checkbox } from '@fluentui/react-native';
 import { useTheme } from '@uifabricshared/theming-react-native';
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
@@ -11,7 +11,6 @@ function onChangeUncontrolled(isChecked: boolean) {
 }
 
 const basicCheckbox: React.FunctionComponent<{}> = () => {
-
   return (
     <View>
       <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
@@ -20,10 +19,9 @@ const basicCheckbox: React.FunctionComponent<{}> = () => {
       <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
     </View>
   );
-}
+};
 
 const otherCheckbox: React.FunctionComponent<{}> = () => {
-
   const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
   const onChangeControlled1 = React.useCallback((checked) => {
     setCheckedControlled1(checked);
@@ -45,10 +43,9 @@ const otherCheckbox: React.FunctionComponent<{}> = () => {
       />
     </View>
   );
-}
+};
 
 const tokenCheckbox: React.FunctionComponent<{}> = () => {
-
   const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
 
   const CircleColorCheckbox = Checkbox.customize({
@@ -58,13 +55,13 @@ const tokenCheckbox: React.FunctionComponent<{}> = () => {
         tokens: {
           checkboxBackgroundColor: 'green',
           checkboxBorderColor: 'green',
-          checkmarkColor: 'white'
+          checkmarkColor: 'white',
-        }
+        },
       },
       focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
       hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } }
+      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
-    }
+    },
   });
 
   const HoverCheckbox = Checkbox.customize({
@@ -72,15 +69,15 @@ const tokenCheckbox: React.FunctionComponent<{}> = () => {
       checked: {
         tokens: {
           checkboxBackgroundColor: 'black',
-          checkmarkColor: 'white'
+          checkmarkColor: 'white',
-        }
+        },
       },
       hovered: {
         tokens: {
-          checkmarkVisibility: 1
+          checkmarkVisibility: 1,
-        }
+        },
-      }
+      },
-    }
+    },
   });
 
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
@@ -93,18 +90,18 @@ const tokenCheckbox: React.FunctionComponent<{}> = () => {
         tokens: {
           checkboxBackgroundColor: checkboxColor,
           checkboxBorderColor: checkboxColor,
-          checkmarkColor: checkmarkColor
+          checkmarkColor: checkmarkColor,
-        }
+        },
       },
       focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
       hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } }
+      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
-    }
+    },
   });
 
   const theme = useTheme();
   const textBoxBorderStyle = {
-    borderColor: theme.colors.inputBorder
+    borderColor: theme.colors.inputBorder,
   };
 
   return (
@@ -123,7 +120,7 @@ const tokenCheckbox: React.FunctionComponent<{}> = () => {
         style={[commonStyles.textBox, textBoxBorderStyle]}
         placeholder="Background color"
         blurOnSubmit={true}
-        onSubmitEditing={e => {
+        onSubmitEditing={(e) => {
           setCheckboxColor(e.nativeEvent.text);
         }}
       />
@@ -132,43 +129,41 @@ const tokenCheckbox: React.FunctionComponent<{}> = () => {
         style={[commonStyles.textBox, textBoxBorderStyle]}
         placeholder="Checkmark color"
         blurOnSubmit={true}
-        onSubmitEditing={e => {
+        onSubmitEditing={(e) => {
           setCheckmarkColor(e.nativeEvent.text);
         }}
       />
     </View>
   );
-}
+};
 
 const checkboxSections: TestSection[] = [
   {
     name: 'Basic Checkboxes',
     testID: CHECKBOX_TESTPAGE,
-    component: basicCheckbox
+    component: basicCheckbox,
   },
   {
     name: 'Other Implementations',
-    component: otherCheckbox
+    component: otherCheckbox,
   },
   {
     name: 'Token Customized Checkboxes',
-    component: tokenCheckbox
+    component: tokenCheckbox,
-  }
+  },
 ];
 
 export const CheckboxTest: React.FunctionComponent<{}> = () => {
-
   const status: PlatformStatus = {
     win32Status: 'Beta',
     uwpStatus: 'Experimental',
     iosStatus: 'N/A',
     macosStatus: 'Experimental',
-    androidStatus: 'N/A'
+    androidStatus: 'N/A',
-  }
+  };
 
-  const description = 'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).'
+  const description =
+    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
 
-  return (
+  return <Test name="Checkbox Test" description={description} sections={checkboxSections} status={status}></Test>;
-    <Test name="Checkbox Test" description={description} sections={checkboxSections} status={status}></Test>
+};
-  );
-};

apps/fluent-tester/src/RNTester/TestComponents/Common/Slider.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ViewProps, StyleSheet, StyleProp, ViewStyle, UIManager, Text, findNodeHandle, View } from 'react-native';
-import { Separator } from '@fluentui-react-native/separator';
+import { Separator, Pressable } from '@fluentui/react-native';
-import { Pressable } from '@fluentui-react-native/pressable';
 import { IPressableState } from '@fluentui-react-native/interactive-hooks';
 
 const thumbSize = 20;
@@ -18,7 +17,7 @@ interface ISliderProps extends ViewProps {
 const styles = StyleSheet.create({
   root: {
     flexDirection: 'row',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   slider: {
     minWidth: thumbSize * 2,
@@ -26,10 +25,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     alignContent: 'stretch',
     height: thumbSize,
-    width: 200
+    width: 200,
   },
   track: {
-    flexGrow: 1
+    flexGrow: 1,
   },
   thumb: {
     width: thumbSize,
@@ -38,12 +37,12 @@ const styles = StyleSheet.create({
     borderWidth: 2,
     borderColor: '#7A7574',
     backgroundColor: '#FFFFFF',
-    position: 'absolute'
+    position: 'absolute',
   },
   label: {
     margin: 8,
-    fontSize: 12
+    fontSize: 12,
-  }
+  },
 });
 
 const Track = Separator.customize({ tokens: { separatorWidth: 4 } });
@@ -52,7 +51,7 @@ function onThumbRenderStyle(state: IPressableState, thumbLocation: number): Styl
   return {
     ...styles.thumb,
     borderColor: state.pressed ? 'black' : state.hovered ? 'red' : '#7A7574',
-    marginLeft: thumbLocation
+    marginLeft: thumbLocation,
   };
 }
 
@@ -130,13 +129,13 @@ export const Slider: React.FunctionComponent<ISliderProps> = (props: ISliderProp
         <Track style={styles.track} />
         {trackLength.current > 0 && (
           <Pressable
-            renderStyle={state => onThumbRenderStyle(state, thumbLocation)}
+            renderStyle={(state) => onThumbRenderStyle(state, thumbLocation)}
             onStartShouldSetResponder={() => trackLength.current > 0}
-            onResponderStart={e => {
+            onResponderStart={(e) => {
               startTouchPosition.current = e.nativeEvent.pageX;
               startTouchThumbLocation.current = thumbLocation;
             }}
-            onResponderMove={e => {
+            onResponderMove={(e) => {
               if (startTouchPosition.current !== -1 && trackLength.current > 0) {
                 const [newThumbLocation, newValue] = calculateThumbLocationAndValue(
                   startTouchThumbLocation.current,

apps/fluent-tester/src/RNTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -1,12 +1,10 @@
 import * as React from 'react';
 import { Text, View } from 'react-native';
-import { Button } from '@fluentui-react-native/button';
+import { Button, ContextualMenu, ContextualMenuItem } from '@fluentui/react-native';
-import { ContextualMenu, ContextualMenuItem } from '@fluentui-react-native/contextual-menu';
 import { CONTEXTUALMENU_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 const contextualMenu: React.FunctionComponent<{}> = () => {
-
   const stdBtnRef = React.useRef(null);
 
   const [showContextualMenu, setShowContextualMenu] = React.useState(false);
@@ -28,9 +26,12 @@ const contextualMenu: React.FunctionComponent<{}> = () => {
     setIsContextualMenuVisible(false);
   }, [setShowContextualMenu]);
 
-  const onItemClick = React.useCallback((key) => {
+  const onItemClick = React.useCallback(
-    setLastMenuItemClicked(key);
+    (key) => {
-  }, [setLastMenuItemClicked]);
+      setLastMenuItemClicked(key);
+    },
+    [setLastMenuItemClicked]
+  );
 
   return (
     <View>
@@ -41,7 +42,11 @@ const contextualMenu: React.FunctionComponent<{}> = () => {
         </Text>
         <Text>
           <Text>Last Menu Item Clicked: </Text>
-          {lastMenuItemClicked > 0 ? <Text style={{ color: 'blue' }}>{lastMenuItemClicked}</Text> : <Text style={{ color: 'blue' }}>none</Text>}
+          {lastMenuItemClicked > 0 ? (
+            <Text style={{ color: 'blue' }}>{lastMenuItemClicked}</Text>
+          ) : (
+            <Text style={{ color: 'blue' }}>none</Text>
+          )}
         </Text>
         <Button content="Press for ContextualMenu" onClick={toggleShowContextualMenu} componentRef={stdBtnRef} />
       </View>
@@ -63,29 +68,27 @@ const contextualMenu: React.FunctionComponent<{}> = () => {
       )}
     </View>
   );
-}
+};
 
 const contextualMenuSections: TestSection[] = [
   {
     name: 'Standard ContextualMenu',
     testID: CONTEXTUALMENU_TESTPAGE,
-    component: contextualMenu
+    component: contextualMenu,
   },
 ];
 
 export const ContextualMenuTest: React.FunctionComponent<{}> = () => {
-
   const status: PlatformStatus = {
     win32Status: 'Experimental',
     uwpStatus: 'Backlog',
     iosStatus: 'Backlog',
     macosStatus: 'Backlog',
-    androidStatus: 'Backlog'
+    androidStatus: 'Backlog',
-  }
+  };
 
-  const description = 'ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.\n\nThere are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.\n\nOrganize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.'
+  const description =
+    'ContextualMenus are lists of commands that are based on the context of selection, mouse hover or keyboard focus. They are one of the most effective and highly used command surfaces, and can be used in a variety of places.\n\nThere are variants that originate from a command bar, or from cursor or focus. Those that come from CommandBars use a beak that is horizontally centered on the button. Ones that come from right click and menu button do not have a beak, but appear to the right and below the cursor. ContextualMenus can have submenus from commands, show selection checks, and icons.\n\nOrganize commands in groups divided by rules. This helps users remember command locations, or find less used commands based on proximity to others. One should also group sets of mutually exclusive or multiple selectable options. Use icons sparingly, for high value commands, and don’t mix icons with selection checks, as it makes parsing commands difficult. Avoid submenus of submenus as they can be difficult to invoke or remember.';
 
-  return (
+  return <Test name="Checkbox Test" description={description} sections={contextualMenuSections} status={status}></Test>;
-    <Test name="Checkbox Test" description={description} sections={contextualMenuSections} status={status}></Test>
-  );
 };

apps/fluent-tester/src/RNTester/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx

@@ -1,7 +1,6 @@
-import { FocusTrapZone, IFocusTrapZoneProps } from '@fluentui-react-native/focus-trap-zone';
+import { FocusTrapZone, IFocusTrapZoneProps, Text } from '@fluentui/react-native';
 import { KeyPressEvent, useFocusState } from '@fluentui-react-native/interactive-hooks';
 import { Stack } from '@fluentui-react-native/stack';
-import { Text } from '@fluentui-react-native/text';
 import * as React from 'react';
 import { TouchableHighlight, TouchableHighlightProps, View, ViewProps } from 'react-native';
 import { stackStyle } from '../Common/styles';
@@ -12,14 +11,14 @@ const trapZoneStyle: IFocusTrapZoneProps['style'] = {
   padding: 10,
   borderWidth: 2,
   borderColor: '#ababab',
-  borderStyle: 'dashed'
+  borderStyle: 'dashed',
 };
 
 const activeTrapZoneStyle: IFocusTrapZoneProps['style'] = {
   padding: 10,
   borderColor: '#ababab',
   borderWidth: 2,
-  borderStyle: 'solid'
+  borderStyle: 'solid',
 };
 
 const componentTwiddlerStyle: ViewProps['style'] = {
@@ -27,13 +26,13 @@ const componentTwiddlerStyle: ViewProps['style'] = {
   padding: 8,
   margin: 4,
   borderColor: '#ababab',
-  borderStyle: 'solid'
+  borderStyle: 'solid',
 };
 
 const focusedComponentTwiddlerStyle: ViewProps['style'] = {
   ...componentTwiddlerStyle,
   borderColor: 'black',
-  backgroundColor: 'lightblue'
+  backgroundColor: 'lightblue',
 };
 
 interface IComponentTwiddlerProps {
@@ -47,7 +46,7 @@ const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps> = (pro
   return (
     <TouchableHighlight {...{ acceptsKeyboardFocus: false }} onPress={props.onPress}>
       <View
-        {...{ acceptsKeyboardFocus: true, ...focusProps } as any}
+        {...({ acceptsKeyboardFocus: true, ...focusProps } as any)}
         style={focusState.focused ? focusedComponentTwiddlerStyle : componentTwiddlerStyle}
       >
         <Text>{props.label}</Text>
@@ -57,13 +56,12 @@ const ComponentTwiddler: React.FunctionComponent<IComponentTwiddlerProps> = (pro
 };
 
 const basicFocusTrapZone: React.FunctionComponent<{}> = () => {
-
   const [state, setState] = React.useState({
     useTrapZone: false,
     renderTrapZone: true,
     disableFirstFocus: false,
     ignoreExternalFocusing: false,
-    focusPreviouslyFocusedInnerElement: false
+    focusPreviouslyFocusedInnerElement: false,
   });
 
   const ftzRef = React.useRef<View>(null);
@@ -132,29 +130,27 @@ const basicFocusTrapZone: React.FunctionComponent<{}> = () => {
       </Stack>
     </View>
   );
-}
+};
 
 const focusTrapZoneSections: TestSection[] = [
   {
     name: 'Basic FocusTrapZone Usage',
     testID: FOCUSTRAPZONE_TESTPAGE,
-    component: basicFocusTrapZone
+    component: basicFocusTrapZone,
   },
 ];
 
 export const FocusTrapTest: React.FunctionComponent<{}> = () => {
-
   const status: PlatformStatus = {
     win32Status: 'Beta',
     uwpStatus: 'Backlog',
     iosStatus: 'N/A',
     macosStatus: 'N/A',
-    androidStatus: 'N/A'
+    androidStatus: 'N/A',
-  }
+  };
 
-  const description = 'FocusTrapZone is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.'
+  const description =
+    'FocusTrapZone is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.';
 
-  return (
+  return <Test name="Focus Trap Zone Test" description={description} sections={focusTrapZoneSections} status={status}></Test>;
-    <Test name="Focus Trap Zone Test" description={description} sections={focusTrapZoneSections} status={status}></Test>
+};
-  );
-};

apps/fluent-tester/src/RNTester/TestComponents/Link/LinkTest.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { Alert } from 'react-native';
-import { Link } from '@fluentui-react-native/link';
+import { Link } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { LINK_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
 const links: React.FunctionComponent<{}> = () => {
-
   const doPress = (): void => {
     Alert.alert('Alert.', 'You have been alerted.');
   };
@@ -18,29 +17,27 @@ const links: React.FunctionComponent<{}> = () => {
       <Link onPress={doPress} content="Click to alert." />
     </Stack>
   );
-}
+};
 
 const linkSections: TestSection[] = [
   {
     name: 'Navigation and Alert',
     testID: LINK_TESTPAGE,
-    component: links
+    component: links,
-  }
+  },
 ];
 
 export const LinkTest: React.FunctionComponent<{}> = () => {
-
   const status: PlatformStatus = {
     win32Status: 'Beta',
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Beta',
-    androidStatus: 'Backlog'
+    androidStatus: 'Backlog',
-  }
+  };
 
-  const description = 'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.'
+  const description =
+    'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
 
-  return (
+  return <Test name="Link Test" description={description} sections={linkSections} status={status}></Test>;
-    <Test name="Link Test" description={description} sections={linkSections} status={status}></Test>
+};
-  );
-};

apps/fluent-tester/src/RNTester/TestComponents/Persona/CustomizeUsage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, Text, Switch, TextInput } from 'react-native';
-import { IPersonaTokens, Persona } from '@fluentui-react-native/persona';
+import { IPersonaTokens, Persona } from '@fluentui/react-native';
 import { michaelImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@uifabricshared/theming-react-native';
@@ -47,7 +47,7 @@ export const CustomizeUsage: React.FunctionComponent<{}> = () => {
 
   const theme = useTheme();
   const textBoxBorderStyle = {
-    borderColor: theme.colors.inputBorder
+    borderColor: theme.colors.inputBorder,
   };
 
   const CustomizedPersona = Persona.customize({ tokens });
@@ -64,7 +64,7 @@ export const CustomizeUsage: React.FunctionComponent<{}> = () => {
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Background color"
           blurOnSubmit={true}
-          onSubmitEditing={e => {
+          onSubmitEditing={(e) => {
             setCoinColor(e.nativeEvent.text);
           }}
         />
@@ -73,7 +73,7 @@ export const CustomizeUsage: React.FunctionComponent<{}> = () => {
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Initials text color"
           blurOnSubmit={true}
-          onSubmitEditing={e => {
+          onSubmitEditing={(e) => {
             setTextColor(e.nativeEvent.text);
           }}
         />

apps/fluent-tester/src/RNTester/TestComponents/Persona/StandardUsage.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { Persona } from '@fluentui-react-native/persona';
+import { Persona, PersonaSize } from '@fluentui/react-native';
-import { PersonaSize } from '@fluentui-react-native/persona-coin';
 import { rajeshImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { View, Text, Switch, Picker } from 'react-native';
@@ -18,7 +17,7 @@ const allSizes: WithUndefined<PersonaSize>[] = [
   'size56',
   'size72',
   'size100',
-  'size120'
+  'size120',
 ];
 
 interface ISwitchWithLabelProps {
@@ -59,7 +58,7 @@ export const StandardUsage: React.FunctionComponent<{}> = () => {
           prompt="Size"
           style={commonStyles.header}
           selectedValue={imageSize || undefinedText}
-          onValueChange={size => setImageSize(size === undefinedText ? undefined : size)}
+          onValueChange={(size) => setImageSize(size === undefinedText ? undefined : size)}
         >
           {allSizes.map((size, index) => (
             <Picker.Item label={size} key={index} value={size} />

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PersonaCoin, IconAlignment, IPersonaCoinTokens } from '@fluentui-react-native/persona-coin';
+import { PersonaCoin, IconAlignment, IPersonaCoinTokens } from '@fluentui/react-native';
 import { Switch, View, Text, TextInput } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './styles';
@@ -19,7 +19,7 @@ export const CustomizeUsage: React.FunctionComponent<{}> = () => {
 
   const theme = useTheme();
   const textBoxBorderStyle = {
-    borderColor: theme.colors.inputBorder
+    borderColor: theme.colors.inputBorder,
   };
 
   const tokens: Partial<IPersonaCoinTokens> = {};
@@ -60,7 +60,7 @@ export const CustomizeUsage: React.FunctionComponent<{}> = () => {
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Background color"
           blurOnSubmit={true}
-          onSubmitEditing={e => {
+          onSubmitEditing={(e) => {
             setCoinColor(e.nativeEvent.text);
           }}
         />
@@ -69,7 +69,7 @@ export const CustomizeUsage: React.FunctionComponent<{}> = () => {
           style={[commonStyles.textBox, textBoxBorderStyle]}
           placeholder="Initials text color"
           blurOnSubmit={true}
-          onSubmitEditing={e => {
+          onSubmitEditing={(e) => {
             setTextColor(e.nativeEvent.text);
           }}
         />

apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/StandardUsage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PersonaSize, PersonaCoinColor, PersonaCoin, PersonaPresence } from '@fluentui-react-native/persona-coin';
+import { PersonaSize, PersonaCoinColor, PersonaCoin, PersonaPresence } from '@fluentui/react-native';
 import { Switch, View, Text, Picker } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
@@ -16,7 +16,7 @@ const allSizes: WithUndefined<PersonaSize>[] = [
   'size56',
   'size72',
   'size100',
-  'size120'
+  'size120',
 ];
 
 const allColors: WithUndefined<PersonaCoinColor>[] = [
@@ -40,7 +40,7 @@ const allColors: WithUndefined<PersonaCoinColor>[] = [
   'warmGray',
   'coolGray',
   'cyan',
-  'rust'
+  'rust',
 ];
 const allPresences: WithUndefined<PersonaPresence>[] = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away'];
 
@@ -50,9 +50,9 @@ export const StandardUsage: React.FunctionComponent<{}> = () => {
   const [coinColor, setCoinColor] = React.useState<WithUndefined<PersonaCoinColor>>('gold');
   const [presence, setPresence] = React.useState<WithUndefined<PersonaPresence>>('online');
 
-  const onSizeChange = React.useCallback(value => setImageSize(value), []);
+  const onSizeChange = React.useCallback((value) => setImageSize(value), []);
-  const onColorChange = React.useCallback(value => setCoinColor(value), []);
+  const onColorChange = React.useCallback((value) => setCoinColor(value), []);
-  const onPresenceChange = React.useCallback(value => setPresence(value), []);
+  const onPresenceChange = React.useCallback((value) => setPresence(value), []);
 
   return (
     <View style={commonStyles.root}>

apps/fluent-tester/src/RNTester/TestComponents/Pressable/PressableTest.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IPressableState, useFocusState, useHoverState, usePressState } from '@fluentui-react-native/interactive-hooks';
-import { Pressable } from '@fluentui-react-native/pressable';
+import { Pressable } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { Square } from '../Common/Square';
 import { Alert, GestureResponderEvent, StyleSheet, View, ViewProps, ViewStyle, Text } from 'react-native';
@@ -13,21 +13,21 @@ const styles = StyleSheet.create({
     padding: 8,
     margin: 4,
     borderStyle: 'dotted',
-    borderColor: 'red'
+    borderColor: 'red',
   },
   solidBorder: {
     borderWidth: 1,
     padding: 8,
     margin: 4,
     borderStyle: 'solid',
-    borderColor: 'black'
+    borderColor: 'black',
   },
   notfocused: {
     borderWidth: 1,
     padding: 8,
     margin: 4,
     borderColor: '#ababab',
-    borderStyle: 'solid'
+    borderStyle: 'solid',
   },
   focused: {
     borderWidth: 1,
@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
     margin: 4,
     borderStyle: 'solid',
     borderColor: 'black',
-    backgroundColor: 'lightblue'
+    backgroundColor: 'lightblue',
   },
   notPressed: {
     borderWidth: 1,
@@ -44,7 +44,7 @@ const styles = StyleSheet.create({
     width: 30,
     height: 30,
     borderColor: '#ababab',
-    borderStyle: 'solid'
+    borderStyle: 'solid',
   },
   pressed: {
     borderWidth: 1,
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
     height: 30,
     borderStyle: 'dashed',
     borderColor: 'black',
-    backgroundColor: 'lightgreen'
+    backgroundColor: 'lightgreen',
   },
 });
 
@@ -68,7 +68,7 @@ const FocusComponent: React.FunctionComponent<ViewProps> = () => {
 
   return (
     <Stack {...{ acceptsKeyboardFocus: false }}>
-      <View {...{ acceptsKeyboardFocus: true, ...focusProps } as any} style={focusState.focused ? styles.focused : styles.notfocused} />
+      <View {...({ acceptsKeyboardFocus: true, ...focusProps } as any)} style={focusState.focused ? styles.focused : styles.notfocused} />
     </Stack>
   );
 };
@@ -96,7 +96,6 @@ const PressComponent: React.FunctionComponent<ViewProps> = (props: ViewProps) =>
 };
 
 const pressable: React.FunctionComponent<{}> = () => {
-
   const [hoverProps, hoverState] = useHoverState({});
 
   return (
@@ -124,29 +123,26 @@ const pressable: React.FunctionComponent<{}> = () => {
       </Stack>
     </Stack>
   );
-}
+};
 
 const pressableSections: TestSection[] = [
   {
     name: 'Pressable Components',
     testID: PRESSABLE_TESTPAGE,
-    component: pressable
+    component: pressable,
-  }
+  },
 ];
 
 export const PressableTest: React.FunctionComponent<{}> = () => {
-
   const status: PlatformStatus = {
     win32Status: 'Beta',
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Experimental',
-    androidStatus: 'Backlog'
+    androidStatus: 'Backlog',
-  }
+  };
 
-  const description = 'No description.'
+  const description = 'No description.';
 
-  return (
+  return <Test name="Pressable Test" description={description} sections={pressableSections} status={status}></Test>;
-    <Test name="Pressable Test" description={description} sections={pressableSections} status={status}></Test>
+};
-  );
-};

apps/fluent-tester/src/RNTester/TestComponents/RadioGroup/RadioGroupTest.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { RadioButton, RadioGroup } from '@fluentui-react-native/radio-group';
+import { RadioButton, RadioGroup } from '@fluentui/react-native';
 import { RADIOGROUP_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 
@@ -17,29 +17,26 @@ const basicRadioGroup: React.FunctionComponent<{}> = () => {
       <RadioButton content="Option D" buttonKey="D" />
     </RadioGroup>
   );
-}
+};
 
 const radioGroupSections: TestSection[] = [
   {
     name: 'Basic RadioGroup Usage',
     testID: RADIOGROUP_TESTPAGE,
-    component: basicRadioGroup
+    component: basicRadioGroup,
-  }
+  },
 ];
 
 export const RadioGroupTest: React.FunctionComponent<{}> = () => {
-
   const status: PlatformStatus = {
     win32Status: 'Beta',
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Experimental',
-    androidStatus: 'Backlog'
+    androidStatus: 'Backlog',
-  }
+  };
 
-  const description = 'No description.'
+  const description = 'No description.';
 
-  return (
+  return <Test name="RadioGroup Test" description={description} sections={radioGroupSections} status={status}></Test>;
-    <Test name="RadioGroup Test" description={description} sections={radioGroupSections} status={status}></Test>
+};
-  );
-};

apps/fluent-tester/src/RNTester/TestComponents/Separator/SeparatorTest.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { Text } from 'react-native';
-import { Button } from '@fluentui-react-native/button';
+import { Button, Separator } from '@fluentui/react-native';
-import { Separator } from '@fluentui-react-native/separator';
 import { stackStyle, separatorStackStyle } from '../Common/styles';
 import { Stack } from '@fluentui-react-native/stack';
 import { SEPARATOR_TESTPAGE } from './consts';
@@ -11,7 +10,6 @@ const BlueSeparator = Separator.customize({ tokens: { color: 'blue' } });
 const RedSeparator = Separator.customize({ tokens: { color: 'red' } });
 
 const separator: React.FunctionComponent<{}> = () => {
-
   return (
     <Stack style={stackStyle} gap={5}>
       <Stack gap={4} style={separatorStackStyle}>
@@ -27,29 +25,27 @@ const separator: React.FunctionComponent<{}> = () => {
       <Button content="This button has longer text" />
     </Stack>
   );
-}
+};
 
 const separatorSections: TestSection[] = [
   {
     name: 'Basic Button',
     testID: SEPARATOR_TESTPAGE,
-    component: separator
+    component: separator,
-  }
+  },
 ];
 
 export const SeparatorTest: React.FunctionComponent<{}> = () => {
-
   const status: PlatformStatus = {
     win32Status: 'Beta',
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Beta',
-    androidStatus: 'Backlog'
+    androidStatus: 'Backlog',
-  }
+  };
 
-  const description = "A separator visually separates content into groups.\n\nYou can render content in the separator by specifying the component's children. The component's children can be plain text or a component like Icon. The content is center-aligned by default."
+  const description =
+    "A separator visually separates content into groups.\n\nYou can render content in the separator by specifying the component's children. The component's children can be plain text or a component like Icon. The content is center-aligned by default.";
 
-  return (
+  return <Test name="Separator Test" description={description} sections={separatorSections} status={status}></Test>;
-    <Test name="Separator Test" description={description} sections={separatorSections} status={status}></Test>
+};
-  );
-};

apps/fluent-tester/src/RNTester/TestComponents/Test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { Separator } from '@fluentui-react-native/separator';
+import { Separator } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from './Common/styles';
 import { app } from '../FabricTester';
@@ -18,7 +18,7 @@ export type PlatformStatus = {
   iosStatus: Status;
   macosStatus: Status;
   androidStatus: Status;
-}
+};
 
 export interface TestProps {
   name: string;
@@ -32,28 +32,28 @@ const styles = StyleSheet.create({
     fontSize: 24,
     fontWeight: 'bold',
     color: '#0B6A0B',
-    marginTop: 4
+    marginTop: 4,
   },
   description: {
     alignItems: 'flex-start',
-    flexWrap: 'wrap'
+    flexWrap: 'wrap',
   },
   section: {
     fontSize: 20,
     fontWeight: 'bold',
     color: '#0B6A0B',
-    marginTop: 12
+    marginTop: 12,
   },
   statusView: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    justifyContent: 'space-between'
+    justifyContent: 'space-between',
   },
   statusHeader: {
     fontSize: 14,
     fontWeight: 'bold',
     color: '#0B6A0B',
-    marginBottom: 6
+    marginBottom: 6,
   },
   statusLabel: {
     fontSize: 12,
@@ -65,13 +65,11 @@ const styles = StyleSheet.create({
   status: {
     color: 'black',
     fontWeight: 'normal',
-  }
+  },
 });
 
 export const Test = (props: TestProps) => {
-
   const themeColor = () => {
-
     let color = 'black'; // default: office (black)
 
     if (app == 'office') color = 'black';
@@ -81,7 +79,7 @@ export const Test = (props: TestProps) => {
     if (app == 'outlook') color = '#106EBE';
 
     return { color: color };
-  }
+  };
 
   return (
     <View>
@@ -92,28 +90,22 @@ export const Test = (props: TestProps) => {
       </Stack>
       <Stack style={stackStyle}>
         <View style={styles.statusView}>
-
           <Stack>
             <Text style={[styles.statusHeader, themeColor()]}>Platform Status</Text>
             <Text style={[styles.statusLabel, themeColor()]}>
-              Win32:{' '}
+              Win32: <Text style={styles.status}>{props.status.win32Status}</Text>
-              <Text style={styles.status}>{props.status.win32Status}</Text>
             </Text>
             <Text style={[styles.statusLabel, themeColor()]}>
-              UWP:{' '}
+              UWP: <Text style={styles.status}>{props.status.uwpStatus}</Text>
-              <Text style={styles.status}>{props.status.uwpStatus}</Text>
             </Text>
             <Text style={[styles.statusLabel, themeColor()]}>
-              iOS:{' '}
+              iOS: <Text style={styles.status}>{props.status.iosStatus}</Text>
-              <Text style={styles.status}>{props.status.iosStatus}</Text>
             </Text>
             <Text style={[styles.statusLabel, themeColor()]}>
-              macOS:{' '}
+              macOS: <Text style={styles.status}>{props.status.macosStatus}</Text>
-              <Text style={styles.status}>{props.status.macosStatus}</Text>
             </Text>
             <Text style={[styles.statusLabel, themeColor()]}>
-              Android:{' '}
+              Android: <Text style={styles.status}>{props.status.androidStatus}</Text>
-              <Text style={styles.status}>{props.status.androidStatus}</Text>
             </Text>
           </Stack>
 
@@ -125,29 +117,29 @@ export const Test = (props: TestProps) => {
             </Text>
             <Text style={[styles.statusLabel, themeColor()]}>
               Beta:{' '}
-              <Text style={styles.status}>Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).</Text>
+              <Text style={styles.status}>
+                Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).
+              </Text>
             </Text>
             <Text style={[styles.statusLabel, themeColor()]}>
-              Experimental:{' '}
+              Experimental: <Text style={styles.status}>Control code checked into repo, but not ready for partner use.</Text>
-              <Text style={styles.status}>Control code checked into repo, but not ready for partner use.</Text>
             </Text>
             <Text style={[styles.statusLabel, themeColor()]}>
-              Backlog:{' '}
+              Backlog: <Text style={styles.status}>Control is in plan and on our backlog to deliver.</Text>
-              <Text style={styles.status}>Control is in plan and on our backlog to deliver.</Text>
             </Text>
             <Text style={[styles.statusLabel, themeColor()]}>
-              N/A:{' '}
+              N/A: <Text style={styles.status}>Control is not in current plan.</Text>
-              <Text style={styles.status}>Control is not in current plan.</Text>
             </Text>
           </Stack>
-
         </View>
       </Stack>
       {props.sections.map((section, index) => {
         const TestComponent = section.component;
         return (
           <View key={index}>
-            <Text style={[styles.section, themeColor()]} testID={section.testID}>{section.name}</Text>
+            <Text style={[styles.section, themeColor()]} testID={section.testID}>
+              {section.name}
+            </Text>
             <Separator />
             <TestComponent />
           </View>
@@ -155,4 +147,4 @@ export const Test = (props: TestProps) => {
       })}
     </View>
   );
-};
+};

apps/fluent-tester/src/RNTester/TestComponents/Text/CustomizeUsage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { Stack } from '@fluentui-react-native/stack';
-import { Text } from '@fluentui-react-native/text';
+import { Text } from '@fluentui/react-native';
 import { stackStyle } from '../Common/styles';
 
 export const CustomizeUsage: React.FunctionComponent<{}> = () => {

apps/fluent-tester/src/RNTester/TestComponents/Text/StandardUsage.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View } from 'react-native';
-import { Text } from '@fluentui-react-native/text';
+import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { TEXT_TESTPAGE } from './consts';

apps/fluent-tester/src/RNTester/TestComponents/Theme/ThemeTest.tsx

@@ -3,9 +3,7 @@ import { FlatList, View, ViewStyle, TextStyle, Text, StyleSheet } from 'react-na
 import { getHostSettingsWin32, ThemeProvider, useTheme, IThemeDefinition, ThemingModuleHelper } from '@uifabricshared/theming-react-native';
 import { themedStyleSheet } from '@uifabricshared/themed-stylesheet';
 import { commonTestStyles } from '../Common/styles';
-import { Button, PrimaryButton, StealthButton } from '@fluentui-react-native/button';
+import { Button, PrimaryButton, StealthButton, Separator, RadioGroup, RadioButton } from '@fluentui/react-native';
-import { Separator } from '@fluentui-react-native/separator';
-import { RadioGroup, RadioButton } from '@fluentui-react-native/radio-group';
 import { ITheme, IPartialTheme } from '@uifabricshared/theming-ramp';
 import { customRegistry } from './CustomThemes';
 import { THEME_TESTPAGE } from './consts';
@@ -17,7 +15,7 @@ const brandColors = {
   Word: ['#E3ECFA', '#A5B9D1', '#7DA3C6', '#4A78B0', '#3C65A4', '#2B579A', '#124078', '#002050'],
   Excel: ['#E9F5EE', '#9FCDB3', '#6EB38A', '#4E9668', '#3F8159', '#217346', '#0E5C2F', '#004B1C'],
   Powerpoint: ['#FCF0ED', '#FDC9B5', '#ED9583', '#E86E58', '#C75033', '#B7472A', '#A92B1A', '#740912'],
-  Outlook: ['#CCE3F5', '#B3D6F2', '#69AFE5', '#2488D8', '#0078D7', '#106EBE', '#1664A7', '#135995']
+  Outlook: ['#CCE3F5', '#B3D6F2', '#69AFE5', '#2488D8', '#0078D7', '#106EBE', '#1664A7', '#135995'],
 };
 
 // This IProcessTheme takes the parent theme and shims in the brand colors selected in the RadioGroup
@@ -60,28 +58,28 @@ const getThemedStyles = themedStyleSheet((theme: ITheme) => {
       height: 20,
       marginRight: 5,
       borderWidth: 2,
-      borderColor: theme.colors.bodyText
+      borderColor: theme.colors.bodyText,
     },
     extraLargeStandardEmphasis: {
       color: hostSettings ? hostSettings.palette.TextEmphasis : theme.colors.bodyText,
       fontSize: theme.typography.sizes.header,
       fontWeight: theme.typography.weights.regular,
-      fontFamily: theme.typography.families.primary
+      fontFamily: theme.typography.families.primary,
     } as TextStyle,
     largeStandard: {
       color: theme.colors.bodyText,
       fontSize: theme.typography.sizes.body,
       fontWeight: theme.typography.weights.regular,
       fontFamily: theme.typography.families.primary,
-      marginBottom: 5
+      marginBottom: 5,
     } as TextStyle,
     stackStyle: {
       borderWidth: 2,
       borderColor: theme.colors.focusBorder,
       padding: 12,
       margin: 8,
-      backgroundColor: theme.colors.background
+      backgroundColor: theme.colors.background,
-    }
+    },
   };
 });
 
@@ -89,12 +87,12 @@ const styles = StyleSheet.create({
   swatchItem: {
     flexDirection: 'row',
     alignItems: 'center',
-    marginVertical: 5
+    marginVertical: 5,
   },
   pickerContainer: {
     flexDirection: 'row',
-    justifyContent: 'space-evenly'
+    justifyContent: 'space-evenly',
-  }
+  },
 });
 
 const Panel: React.FunctionComponent = () => {
@@ -142,9 +140,7 @@ const SwatchList: React.FunctionComponent = () => {
   );
 
   const flattenArray = React.useCallback(() => {
-    return Object.keys(hostSettings.palette)
+    return Object.keys(hostSettings.palette).sort().map(aggregator);
-      .sort()
-      .map(aggregator);
   }, [hostSettings.palette, aggregator]);
 
   const paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
@@ -202,7 +198,6 @@ const ThemeTestInner: React.FunctionComponent = () => {
       <Text style={themedStyles.extraLargeStandardEmphasis}>Host-specific Theme Settings</Text>
       <Separator />
       <SwatchList />
-
     </View>
   );
 };
@@ -210,21 +205,21 @@ const ThemeTestInner: React.FunctionComponent = () => {
 const themeSections: TestSection[] = [
   {
     name: 'Theme Test',
-    component: ThemeTestInner
+    component: ThemeTestInner,
   },
 ];
 
 export const ThemeTest: React.FunctionComponent = () => {
-
   const status: PlatformStatus = {
     win32Status: 'Beta',
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Experimental',
-    androidStatus: 'Backlog'
+    androidStatus: 'Backlog',
-  }
+  };
 
-  const description = 'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.'
+  const description =
+    'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
 
   return (
     <ThemeProvider theme="Default">

apps/ios/package.json

@@ -10,6 +10,7 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "start": "react-native start",
     "test": "fluentui-scripts jest",
@@ -20,7 +21,6 @@
   "dependencies": {
     "@fluentui-react-native/tester": "^0.3.5",
     "@uifabricshared/theming-react-native": "0.7.74",
-    "@uifabricshared/themed-stylesheet": "0.3.67",
     "react": "16.11.0",
     "react-native": "0.62.2",
     "react-native-test-app": "0.1.27"
@@ -34,7 +34,7 @@
     "eslint": "^6.5.1",
     "jest": "^24.9.0",
     "metro-react-native-babel-preset": "^0.58.0",
-    "react-test-renderer": "16.11.0"
+    "react-test-renderer": "~16.11.0"
   },
   "jest": {
     "preset": "react-native"
@@ -47,5 +47,10 @@
     "outputPath": "./dist",
     "bundleName": "index.bundle",
     "noPlatformSuffix": true
+  },
+  "depcheck": {
+    "ignoreMatches": [
+      "react-native-test-app"
+    ]
   }
 }

apps/macos/package.json

@@ -11,6 +11,7 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "start": "react-native start",
     "test": "fluentui-scripts jest",
@@ -19,7 +20,6 @@
   "dependencies": {
     "@fluentui-react-native/tester": "^0.3.5",
     "@uifabricshared/theming-react-native": "0.7.74",
-    "@uifabricshared/themed-stylesheet": "0.3.67",
     "react-native-macos": "^0.61.0-0",
     "react-native-test-app": "0.1.27"
   },
@@ -31,7 +31,13 @@
     "babel-jest": "^24.9.0",
     "eslint": "^6.5.1",
     "jest": "^24.9.0",
-    "metro-react-native-babel-preset": "^0.58.0"
+    "metro-config": "^0.58.0",
+    "metro-react-native-babel-preset": "^0.58.0",
+    "react-native": "^0.62.2",
+    "react-test-renderer": "~16.11.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
   },
   "jest": {
     "preset": "react-native"
@@ -44,5 +50,10 @@
     "outputPath": "./dist",
     "bundleName": "index.bundle",
     "noPlatformSuffix": true
+  },
+  "depcheck": {
+    "ignoreMatches": [
+      "react-native-test-app"
+    ]
   }
 }

apps/win32/package.json

@@ -13,6 +13,7 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "start": "fluentui-scripts metro --server --cli --port 8081",
     "test": "fluentui-scripts jest",
@@ -28,7 +29,6 @@
   "dependencies": {
     "@fluentui-react-native/tester": "^0.3.5",
     "@uifabricshared/theming-react-native": "0.7.74",
-    "@uifabricshared/themed-stylesheet": "0.3.67",
     "react": "16.11.0",
     "react-native": "0.62.2",
     "react-native-svg": "^11.0.0"
@@ -43,6 +43,7 @@
     "@types/react-native": "^0.62.0",
     "@uifabricshared/build-native": "^0.1.1",
     "@uifabricshared/eslint-config-rules": "^0.1.1",
+    "metro-config": "^0.58.0",
     "metro-react-native-babel-preset": "^0.58.0",
     "react-native-svg-transformer": "^0.14.3",
     "react-test-renderer": "~16.11.0",

apps/win32/react-native.config.js

@@ -1,5 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-module.exports = {
-  reactNativePath:  fs.realpathSync(path.resolve(require.resolve('react-native-windows/package.json'), '..')),
-};

apps/windows/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "scripts": {
     "bundle": "fluentui-scripts metro --cli",
+    "depcheck": "fluentui-scripts depcheck",
     "e2etest": "rimraf reports/* && wdio",
     "generate-report": "allure generate allure-results --clean && allure open",
     "lint": "eslint .",
@@ -30,6 +31,7 @@
     "metro-config": "^0.58.0",
     "metro-react-native-babel-preset": "^0.58.0",
     "react-test-renderer": "~16.11.0",
+    "rimraf": "~3.0.2",
     "ts-node": "^8.10.1",
     "tsconfig-paths": "^3.9.0",
     "typescript": "3.8.3",
@@ -61,5 +63,10 @@
     "outputPath": "./dist",
     "bundleName": "index.bundle",
     "noPlatformSuffix": true
+  },
+  "depcheck": {
+    "ignoreMatches": [
+      "react-native-windows"
+    ]
   }
 }

change/@fluentui-react-native-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui/react-native",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:43.393Z"
+}

change/@fluentui-react-native-adapters-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/adapters",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:45.507Z"
+}

change/@fluentui-react-native-adapters-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/adapters",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:46.863Z"
+}

change/@fluentui-react-native-button-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/button",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:35.502Z"
+}

change/@fluentui-react-native-callout-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/callout",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:37.559Z"
+}

change/@fluentui-react-native-checkbox-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/checkbox",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:40.541Z"
+}

change/@fluentui-react-native-composition-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/composition",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:06.819Z"
+}

change/@fluentui-react-native-contextual-menu-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/contextual-menu",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:42.569Z"
+}

change/@fluentui-react-native-experimental-framework-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/experimental-framework",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:09.366Z"
+}

change/@fluentui-react-native-focus-trap-zone-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/focus-trap-zone",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:44.620Z"
+}

change/@fluentui-react-native-immutable-merge-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/immutable-merge",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:14.157Z"
+}

change/@fluentui-react-native-interactive-hooks-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/interactive-hooks",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:47.667Z"
+}

change/@fluentui-react-native-interactive-hooks-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/interactive-hooks",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:52.311Z"
+}

change/@fluentui-react-native-link-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/link",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:47.803Z"
+}

change/@fluentui-react-native-memo-cache-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/memo-cache",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:27.158Z"
+}

change/@fluentui-react-native-memo-cache-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/memo-cache",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:20.227Z"
+}

change/@fluentui-react-native-persona-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/persona",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:50.037Z"
+}

change/@fluentui-react-native-persona-coin-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/persona-coin",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:52.103Z"
+}

change/@fluentui-react-native-pressable-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/pressable",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:54.582Z"
+}

change/@fluentui-react-native-radio-group-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/radio-group",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:56.892Z"
+}

change/@fluentui-react-native-separator-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/separator",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:59.386Z"
+}

change/@fluentui-react-native-stack-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/stack",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:02.204Z"
+}

change/@fluentui-react-native-tester-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/tester",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:28.125Z"
+}

change/@fluentui-react-native-tester-win32-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/tester-win32",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:46:32.307Z"
+}

change/@fluentui-react-native-text-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/text",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:04.525Z"
+}

change/@fluentui-react-native-tokens-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/tokens",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:49.678Z"
+}

change/@fluentui-react-native-tokens-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/tokens",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:57.771Z"
+}

change/@fluentui-react-native-use-slots-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/use-slots",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:11.550Z"
+}

change/@fluentui-react-native-use-styling-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@fluentui-react-native/use-styling",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:13.605Z"
+}

change/@uifabricshared-foundation-composable-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/foundation-composable",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:15.581Z"
+}

change/@uifabricshared-foundation-composable-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/foundation-composable",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:42:55.002Z"
+}

change/@uifabricshared-foundation-compose-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/foundation-compose",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:17.712Z"
+}

change/@uifabricshared-foundation-settings-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/foundation-settings",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:19.826Z"
+}

change/@uifabricshared-foundation-settings-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/foundation-settings",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:00.674Z"
+}

change/@uifabricshared-foundation-tokens-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/foundation-tokens",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:22.214Z"
+}

change/@uifabricshared-foundation-tokens-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/foundation-tokens",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:07.371Z"
+}

change/@uifabricshared-immutable-merge-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/immutable-merge",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:24.928Z"
+}

change/@uifabricshared-theme-registry-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/theme-registry",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:29.843Z"
+}

change/@uifabricshared-themed-settings-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/themed-settings",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:31.948Z"
+}

change/@uifabricshared-themed-settings-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/themed-settings",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:30.658Z"
+}

change/@uifabricshared-themed-stylesheet-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/themed-stylesheet",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:36.268Z"
+}

change/@uifabricshared-themed-stylesheet-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/themed-stylesheet",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:36.108Z"
+}

change/@uifabricshared-theming-ramp-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/theming-ramp",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:38.304Z"
+}

change/@uifabricshared-theming-ramp-2020-08-12-23-43-57-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "none",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/theming-ramp",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "none",
+  "date": "2020-08-13T06:43:41.762Z"
+}

change/@uifabricshared-theming-react-native-2020-08-12-12-47-49-depcheck.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "fix dependency errors",
+  "packageName": "@uifabricshared/theming-react-native",
+  "email": "jasonmo@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-12T19:47:40.245Z"
+}

lage.config.js

@@ -2,9 +2,10 @@ module.exports = {
   pipeline: {
     ['build-tools']: ['^build-tools'],
     build: ['build-tools', '^build'],
-    buildci: ['build', 'test', 'bundle'],
+    buildci: ['build', 'test', 'depcheck', 'bundle'],
     bundle: ['build-tools'],
     clean: [],
+    depcheck: ['build-tools'],
     lint: ['build-tools'],
     ['verify-api']: [],
     ['update-api']: [],

package.json

@@ -23,6 +23,7 @@
     "change": "beachball change",
     "check-for-changed-files": "cd scripts && yarn fluentui-scripts check-for-modified-files",
     "checkchange": "beachball check --changehint \"Run 'yarn change' to generate a change file\"",
+    "depcheck": "lage depcheck",
     "lint": "lage lint",
     "preinstall": "node ./scripts/use-yarn-please.js",
     "prettier": "cd scripts && yarn prettier",

packages/components/Button/package.json

@@ -11,6 +11,7 @@
   },
   "scripts": {
     "build": "fluentui-scripts build",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "lint": "fluentui-scripts eslint",

packages/components/Callout/package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "build": "fluentui-scripts build",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
@@ -21,7 +22,6 @@
   },
   "dependencies": {
     "@uifabricshared/foundation-compose": "^1.6.78",
-    "@fluentui-react-native/adapters": ">=0.3.34 <1.0.0",
     "@fluentui-react-native/interactive-hooks": ">=0.5.0 <1.0.0",
     "@fluentui-react-native/tokens": ">=0.5.4 <1.0.0",
     "@uifabricshared/foundation-composable": ">=0.6.71 <1.0.0",

packages/components/Checkbox/package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "build": "fluentui-scripts build",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
@@ -23,7 +24,6 @@
     "@uifabricshared/foundation-compose": "^1.6.78",
     "@fluentui-react-native/adapters": ">=0.3.34 <1.0.0",
     "@fluentui-react-native/interactive-hooks": ">=0.5.0 <1.0.0",
-    "@fluentui-react-native/pressable": ">=0.3.83 <1.0.0",
     "@fluentui-react-native/text": ">=0.6.6 <1.0.0",
     "@fluentui-react-native/tokens": ">=0.5.4 <1.0.0",
     "@uifabricshared/foundation-composable": ">=0.6.71 <1.0.0",

packages/components/ContextualMenu/package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "build": "fluentui-scripts build",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
@@ -21,7 +22,6 @@
   },
   "dependencies": {
     "@uifabricshared/foundation-compose": "^1.6.78",
-    "@fluentui-react-native/adapters": ">=0.3.34 <1.0.0",
     "@fluentui-react-native/callout": ">=0.11.7 <1.0.0",
     "@fluentui-react-native/interactive-hooks": ">=0.5.0 <1.0.0",
     "@fluentui-react-native/text": ">=0.6.6 <1.0.0",

packages/components/FocusTrapZone/package.json

@@ -11,6 +11,7 @@
   },
   "scripts": {
     "build": "fluentui-scripts build",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "lint": "fluentui-scripts eslint",
@@ -20,10 +21,8 @@
     "update-api": "fluentui-scripts update-api-extractor"
   },
   "dependencies": {
-    "@uifabricshared/foundation-compose": "^1.6.78",
     "@fluentui-react-native/adapters": ">=0.3.34 <1.0.0",
     "@fluentui-react-native/interactive-hooks": ">=0.5.0 <1.0.0",
-    "@fluentui-react-native/tokens": ">=0.5.4 <1.0.0",
     "@uifabricshared/foundation-composable": ">=0.6.71 <1.0.0",
     "@uifabricshared/foundation-settings": ">=0.6.3 <1.0.0"
   },

packages/components/Link/package.json

@@ -13,6 +13,7 @@
     "build": "fluentui-scripts build",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",

packages/components/Persona/package.json

@@ -13,6 +13,7 @@
     "build": "fluentui-scripts build",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",

packages/components/PersonaCoin/package.json

@@ -14,6 +14,7 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "lint": "fluentui-scripts eslint",
+    "depcheck": "fluentui-scripts depcheck",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",
     "verify-api": "fluentui-scripts verify-api-extractor",

packages/components/Pressable/package.json

@@ -13,6 +13,7 @@
     "build": "fluentui-scripts build",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",
@@ -20,7 +21,6 @@
     "update-api": "fluentui-scripts update-api-extractor"
   },
   "dependencies": {
-    "@uifabricshared/foundation-compose": "^1.6.78",
     "@fluentui-react-native/adapters": ">=0.3.34 <1.0.0",
     "@fluentui-react-native/interactive-hooks": ">=0.5.0 <1.0.0",
     "@uifabricshared/foundation-composable": ">=0.6.71 <1.0.0",

packages/components/RadioGroup/package.json

@@ -13,6 +13,7 @@
     "build": "fluentui-scripts build",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",

packages/components/Separator/package.json

@@ -13,6 +13,7 @@
     "build": "fluentui-scripts build",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",

packages/components/Stack/package.json

@@ -13,6 +13,7 @@
     "build": "fluentui-scripts build",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",

packages/components/text/package.json

@@ -13,6 +13,7 @@
     "build": "fluentui-scripts build",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
     "update-snapshots": "fluentui-scripts jest -u",
@@ -31,6 +32,7 @@
     "react-native": "0.62.2"
   },
   "peerDependencies": {
+    "react": "^16.8.0",
     "react-native": ">=0.60.0"
   },
   "author": "",

packages/experimental/Button/package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "build": "fluentui-scripts build",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
@@ -32,9 +33,11 @@
     "@types/react-native": "^0.62.0",
     "@uifabricshared/build-native": "^0.1.1",
     "@uifabricshared/eslint-config-rules": "^0.1.1",
+    "react": "16.11.0",
     "react-native": "0.62.2"
   },
   "peerDependencies": {
+    "react": "^16.8.0",
     "react-native": ">=0.60.0"
   },
   "author": "",

packages/experimental/Stack/package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "build": "fluentui-scripts build",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
@@ -31,9 +32,11 @@
     "@fluentui-react-native/text": ">=0.6.6 <1.0.0",
     "@uifabricshared/build-native": "^0.1.1",
     "@uifabricshared/eslint-config-rules": "^0.1.1",
+    "react": "16.11.0",
     "react-native": "0.62.2"
   },
   "peerDependencies": {
+    "react": "^16.8.0",
     "react-native": ">=0.60.0"
   },
   "author": "",

packages/experimental/Text/package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "build": "fluentui-scripts build",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "test": "fluentui-scripts jest",
@@ -22,8 +23,7 @@
   },
   "dependencies": {
     "@fluentui-react-native/adapters": ">=0.3.34 <1.0.0",
-    "@fluentui-react-native/experimental-framework": "0.2.7",
+    "@fluentui-react-native/experimental-framework": "0.2.7"
-    "@fluentui-react-native/tokens": ">=0.5.4 <1.0.0"
   },
   "devDependencies": {
     "@types/react-native": "^0.62.0",
@@ -32,6 +32,7 @@
     "react-native": "0.62.2"
   },
   "peerDependencies": {
+    "react": "^16.8.0",
     "react-native": ">=0.60.0"
   },
   "author": "",

packages/experimental/composition/package.json

@@ -17,6 +17,7 @@
     "build": "fluentui-scripts build",
     "bundle": "fluentui-scripts bundle",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "code-style": "fluentui-scripts code-style",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
@@ -32,12 +33,14 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui-react-native/immutable-merge": "^1.0.1",
-    "@fluentui-react-native/memo-cache": "^1.0.1",
     "@fluentui-react-native/use-slots": ">=0.3.4 <1.0.0",
     "@fluentui-react-native/use-styling": ">=0.2.3 <1.0.0"
   },
   "devDependencies": {
-    "@types/jest": "^19.2.2",
+    "@uifabricshared/build-native": "^0.1.1",
-    "@uifabricshared/build-native": "^0.1.1"
+    "react-native": "^0.62.2"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.60.0"
   }
 }

packages/experimental/experimental-framework/package.json

@@ -14,6 +14,7 @@
     "bundle": "fluentui-scripts webpack",
     "clean": "fluentui-scripts clean",
     "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "start:tester": "react-native start --projectRoot ./src",
@@ -35,7 +36,6 @@
     "@fluentui-react-native/tokens": ">=0.5.4 <1.0.0"
   },
   "devDependencies": {
-    "@types/prop-types": "15.5.1",
     "@types/react": "^16.9.34",
     "@types/react-native": "^0.62.0",
     "@uifabricshared/build-native": "^0.1.1",

packages/experimental/use-slots/package.json

@@ -18,6 +18,7 @@
     "bundle": "fluentui-scripts bundle",
     "clean": "fluentui-scripts clean",
     "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "start": "fluentui-scripts dev",
@@ -31,13 +32,16 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@fluentui-react-native/memo-cache": "^1.0.1",
-    "@fluentui-react-native/immutable-merge": "^1.0.1",
-    "@fluentui-react-native/use-styling": ">=0.2.3 <1.0.0",
     "@uifabricshared/foundation-settings": ">=0.6.3 <1.0.0"
   },
   "devDependencies": {
     "@types/jest": "^19.2.2",
-    "@uifabricshared/build-native": "^0.1.1"
+    "@uifabricshared/build-native": "^0.1.1",
+    "react": "16.11.0",
+    "react-native": "^0.62.2"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-native": ">0.60.0"
   }
 }

packages/experimental/use-styling/package.json

@@ -18,6 +18,7 @@
     "bundle": "fluentui-scripts bundle",
     "clean": "fluentui-scripts clean",
     "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
     "just": "fluentui-scripts",
     "lint": "fluentui-scripts eslint",
     "start": "fluentui-scripts dev",
@@ -32,8 +33,7 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui-react-native/immutable-merge": "^1.0.1",
-    "@fluentui-react-native/memo-cache": "^1.0.1",
+    "@fluentui-react-native/memo-cache": "^1.0.1"
-    "@uifabricshared/foundation-settings": ">=0.6.3 <1.0.0"
   },
   "devDependencies": {
     "@types/jest": "^19.2.2",

packages/framework/foundation-composable/package.json

@@ -18,6 +18,7 @@
     "bundle": "fluentui-scripts bundle",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "test": "fluentui-scripts jest",
     "code-style": "fluentui-scripts code-style",
     "lint": "fluentui-scripts eslint",

packages/framework/foundation-compose/package.json

@@ -18,6 +18,7 @@
     "bundle": "fluentui-scripts bundle",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "test": "fluentui-scripts jest",
     "code-style": "fluentui-scripts code-style",
     "lint": "fluentui-scripts eslint",
@@ -32,15 +33,23 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui-react-native/immutable-merge": "^1.0.1",
-    "@fluentui-react-native/memo-cache": "^1.0.1",
     "@uifabricshared/themed-settings": ">=0.4.70 <1.0.0",
     "@uifabricshared/foundation-composable": ">=0.6.71 <1.0.0",
+    "@uifabricshared/foundation-settings": ">=0.6.3 <1.0.0",
     "@uifabricshared/foundation-tokens": ">=0.7.2 <1.0.0",
     "@uifabricshared/theming-react-native": ">=0.7.74 <1.0.0",
     "@uifabricshared/theming-ramp": ">=0.10.3 <1.0.0"
   },
   "devDependencies": {
-    "@types/jest": "^19.2.2",
+    "@uifabricshared/eslint-config-rules": "^0.1.1",
-    "@uifabricshared/eslint-config-rules": "^0.1.1"
+    "react": "16.11.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0"
+  },
+  "depcheck": {
+    "ignoreMatches": [
+      "@uifabricshared/theming-react-native"
+    ]
   }
 }

packages/framework/foundation-settings/package.json

@@ -18,6 +18,7 @@
     "bundle": "fluentui-scripts bundle",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "test": "fluentui-scripts jest",
     "code-style": "fluentui-scripts code-style",
     "lint": "fluentui-scripts eslint",

packages/framework/foundation-tokens/package.json

@@ -18,6 +18,7 @@
     "bundle": "fluentui-scripts bundle",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "test": "fluentui-scripts jest",
     "code-style": "fluentui-scripts code-style",
     "lint": "fluentui-scripts eslint",

packages/framework/immutable-merge/package.json

@@ -18,6 +18,7 @@
     "bundle": "fluentui-scripts bundle",
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
+    "depcheck": "fluentui-scripts depcheck",
     "test": "fluentui-scripts jest",
     "code-style": "fluentui-scripts code-style",
     "lint": "fluentui-scripts eslint",

packages/framework/memo-cache/package.json

@@ -19,6 +19,7 @@
     "just": "fluentui-scripts",
     "clean": "fluentui-scripts clean",
     "code-style": "fluentui-scripts code-style",
+    "depcheck": "fluentui-scripts depcheck",
     "lint": "fluentui-scripts eslint",
     "start": "fluentui-scripts dev",
     "start-test": "fluentui-scripts jest-watch",