Integrate dependency checker into CI and fix dependency errors (micro…

…soft#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
hansenyy · Aug 17, 2020 · 2216954 · 2216954
1 parent f6dd265
commit 2216954
Show file tree

Hide file tree

Showing 117 changed files with 918 additions and 316 deletions.
diff --git a/.vscode/extensions.json b/.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"
+  ]
+}
diff --git a/.vscode/settings.json b/.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
   }
 }
diff --git a/apps/fluent-tester/package.json b/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": {

diff --git a/apps/fluent-tester/src/RNTester/FabricTester.tsx b/apps/fluent-tester/src/RNTester/FabricTester.tsx
@@ -1,5 +1,4 @@
-import { StealthButton } from '@fluentui-react-native/button';
-import { Separator } from '@fluentui-react-native/separator';
+import { StealthButton, Separator } from '@fluentui/react-native';
 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>
   );
-};
+};
diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Button/ButtonFocusTest.tsx b/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>
   );
-};
+};
diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Button/ButtonIconTest.tsx b/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>
     );
   }
-};
+};
diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Checkbox/CheckboxTest.tsx b/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,29 +55,29 @@ 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({
     _overrides: {
       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 (
-    <Test name="Checkbox Test" description={description} sections={checkboxSections} status={status}></Test>
-  );
-};
+  return <Test name="Checkbox Test" description={description} sections={checkboxSections} status={status}></Test>;
+};