Merge branch 'master' into prelint

change/@fluentui-codemods-2020-08-15-12-38-06-implement-result.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Codemods: Implement result and prepare for logging changes",
+  "packageName": "@fluentui/codemods",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-08-15T19:38:06.133Z"
+}

change/@fluentui-react-avatar-2020-08-17-10-51-03-mismatchedVersions.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "Fixing lint error that's breaking master build due to mismatched package versions.",
+  "packageName": "@fluentui/react-avatar",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-08-17T17:51:03.355Z"
+}

change/@uifabric-example-app-base-2020-08-14-15-05-32-exampleAppBaseDeps.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "@uifabric/example-app-base: Updating dependencies to resolve security issues.",
+  "packageName": "@uifabric/example-app-base",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-08-14T22:05:32.209Z"
+}

packages/codemods/src/codeMods/mods/componentToCompat/componentToCompat.mod.ts

@@ -1,6 +1,7 @@
 import { runComponentToCompat, buildCompatHash, RawCompat, ComponentToCompat, getNamedExports } from './compatHelpers';
 import { CodeMod } from '../../types';
 import { SourceFile } from 'ts-morph';
+import { Ok } from '../../../helpers/result';
 
 // Not sure if this the best way to get all the things exported from button. It's dependent on version
 // And other things. Ideally we'd be able to get it from within ts-morph.
@@ -40,7 +41,7 @@ export function createComponentToCompat(comp: RawCompat): ComponentToCompat {
 const ComponentToCompat: CodeMod = {
   run: (file: SourceFile) => {
     runComponentToCompat(file, buildCompatHash(exportMapping, createComponentToCompat), fabricindex);
-    return { success: true };
+    return Ok({ logs: ['Moved imports to compat'] });
   },
   name: 'ComponentToCompat',
   version: '1.0.0',

packages/codemods/src/codeMods/mods/configMod/configMod.ts

@@ -8,6 +8,7 @@ import {
   CodeModMapType,
 } from '../../types';
 import { findJsxTag, renameProp, getImportsByPath, repathImport } from '../../utilities/index';
+import { Ok, Err } from '../../../helpers/result';
 
 const jsonObj: UpgradeJSONType = require('../upgrades.json');
 
@@ -23,9 +24,9 @@ export function createCodeModFromJson(): CodeMod | undefined {
           func();
         });
       } catch (e) {
-        return { success: false };
+        Err({ reason: 'Error' });
       }
-      return { success: true };
+      return Ok({ logs: ['Updated Successfully'] });
     },
     version: '100000',
     name: jsonObj.name,

packages/codemods/src/codeMods/mods/officeToFluentImport/officeToFluentImport.mod.ts

@@ -1,6 +1,7 @@
 import { SourceFile } from 'ts-morph';
 import { CodeMod } from '../../types';
 import { getImportsByPath, repathImport } from '../../utilities/index';
+import { Ok } from '../../../helpers/result';
 
 const searchString = /^office\-ui\-fabric\-react/;
 const newString = '@fluentui/react';
@@ -11,7 +12,7 @@ const RepathOfficeToFluentImports: CodeMod = {
     imports.forEach(val => {
       repathImport(val, newString, searchString);
     });
-    return { success: true };
+    return Ok({ logs: ['Replaced office-ui-fabric-react imports with @fluentui'] });
   },
   name: 'RepathOfficeImportsToFluent',
   version: '1.0.0',

packages/codemods/src/codeMods/mods/oldToNewButton/oldToNewButton.mod.ts

@@ -1,16 +1,17 @@
 import { SourceFile } from 'ts-morph';
 import { CodeMod } from '../../types';
 import { renameProp, findJsxTag } from '../../utilities/index';
+import { Ok, Err } from '../../../helpers/result';
 
 const oldToNewButton: CodeMod = {
   run: (file: SourceFile) => {
     try {
       const tags = findJsxTag(file, 'DefaultButton');
       renameProp(tags, 'toggled', 'checked');
     } catch (e) {
-      return { success: false };
+      return Err({ reason: 'Error' });
     }
-    return { success: true };
+    return Ok({ logs: ['Upgrade completed'] });
   },
   version: '100000',
   name: 'oldToNewButton',

packages/codemods/src/codeMods/mods/personaToAvatar/personaToAvatar.mod.ts

@@ -10,6 +10,7 @@ import {
 } from 'ts-morph';
 import { findJsxTag, appendOrCreateNamedImport } from '../../utilities/index';
 import { CodeMod } from '../../types';
+import { Ok, Err } from '../../../helpers/result';
 
 const personaPath = 'office-ui-fabric-react/lib/Persona';
 
@@ -169,9 +170,9 @@ const PersonaToAvatarMod: CodeMod = {
       renamePrimaryTextProp(file);
       renameRenderCoin(file);
     } catch (e) {
-      return { success: false };
+      return Err({ reason: 'Error', log: JSON.stringify(e) });
     }
-    return { success: true };
+    return Ok({ logs: ['Replaced Persona with Avatar'] });
   },
   version: '100000',
   name: 'PersonaToAvatar',

packages/codemods/src/codeMods/types.ts

@@ -1,9 +1,14 @@
 import { SourceFile, JsxExpression, JsxOpeningElement, JsxSelfClosingElement } from 'ts-morph';
+import { Result } from '../helpers/result';
 
-export interface CodeModResult {
-  success?: boolean;
+export interface ModResult {
+  logs: string[];
 }
-
+export type NoOp = {
+  reason: string;
+  log?: string;
+};
+export type CodeModResult = Result<ModResult, NoOp>;
 export interface CodeMod<T = SourceFile> {
   /**
    * Each type of codemod can have multiple versions which work on different versions of its targeted package.

packages/codemods/src/modRunner/logger.ts

@@ -0,0 +1,10 @@
+export interface LogFunction {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (...args: any[]): void;
+}
+
+export interface Logger {
+  log: LogFunction;
+  warn: LogFunction;
+  error: LogFunction;
+}

packages/codemods/src/modRunner/runnerUtilities.ts

@@ -1,6 +1,7 @@
 import { CodeMod } from '../codeMods/types';
 import { Glob } from 'glob';
 import { Maybe, Nothing, Something } from '../helpers/maybe';
+import { Logger } from './logger';
 
 // TODO ensure that async for all these utilities works
 export function runMods<T>(
@@ -71,12 +72,12 @@ export function loadMod(path: string, errorCallback: (e: Error) => void): Maybe<
   return Nothing();
 }
 
-export function getEnabledMods(getPaths = getModsPaths, loadM = loadMod) {
+export function getEnabledMods(logger: Logger, getPaths = getModsPaths, loadM = loadMod) {
   return getPaths()
     .map(pth => {
-      console.log('fetching codeMod at ', pth);
+      logger.log('fetching codeMod at ', pth);
       return loadM(pth, e => {
-        console.error(e);
+        logger.error(e);
       });
     })
     .filter(modEnabled)

packages/codemods/src/modRunner/tests/command.test.ts

@@ -1,4 +1,5 @@
 import { CommandParser, CommandParserResult, yargsParse } from '../../command';
+import { Ok } from '../../helpers/result';
 
 describe('command parser', () => {
   describe('when called with a single argument', () => {
@@ -39,7 +40,7 @@ describe('command parser', () => {
         result.modsFilter({
           name: 'one',
           run: () => {
-            return {};
+            return Ok({ logs: [] });
           },
         }),
       ).toBe(true);
@@ -50,7 +51,7 @@ describe('command parser', () => {
         result.modsFilter({
           name: 'one',
           run: () => {
-            return {};
+            return Ok({ logs: [] });
           },
         }),
       ).toBe(false);

packages/codemods/src/modRunner/tests/filters.test.ts

@@ -1,5 +1,6 @@
 import { getModFilter, getRegexFilter, getStringFilter } from '../modFilter';
 import { Maybe } from '../../helpers/maybe';
+import { Ok } from '../../helpers/result';
 
 describe('modRunner tests', () => {
   it('gets a basic exact name match filter from string', () => {
@@ -21,23 +22,23 @@ describe('modRunner tests', () => {
       modFilter({
         name: 'ohi',
         run: () => {
-          return {};
+          return Ok({ logs: [] });
         },
       }),
     ).toBe(true);
     expect(
       modFilter({
         name: 'bar',
         run: () => {
-          return {};
+          return Ok({ logs: [] });
         },
       }),
     ).toBe(true);
     expect(
       modFilter({
         name: 'foo',
         run: () => {
-          return {};
+          return Ok({ logs: [] });
         },
       }),
     ).toBe(true);
@@ -49,23 +50,23 @@ describe('modRunner tests', () => {
       modFilter({
         name: 'hi',
         run: () => {
-          return {};
+          return Ok({ logs: [] });
         },
       }),
     ).toBe(true);
     expect(
       modFilter({
         name: 'o zz o',
         run: () => {
-          return {};
+          return Ok({ logs: [] });
         },
       }),
     ).toBe(true);
     expect(
       modFilter({
         name: 'I wont be filtered!',
         run: () => {
-          return {};
+          return Ok({ logs: [] });
         },
       }),
     ).toBe(false);

packages/codemods/src/modRunner/tests/mocks/MockMods/CodeMod.mock.ts

@@ -1,7 +1,8 @@
 import { CodeMod } from '../../../../codeMods/types';
+import { Err } from '../../../../helpers/result';
 const CodeMod: CodeMod<string> = {
   run: () => {
-    return {};
+    return Err({ reason: 'No operation taken' });
   },
   version: '1.0.0',
   name: 'CodeMod',

packages/codemods/src/modRunner/tests/modRunner.test.ts

@@ -8,6 +8,7 @@ import {
 } from '../runnerUtilities';
 import { CodeMod, CodeModResult } from '../../codeMods/types';
 import { Maybe, Nothing } from '../../helpers/maybe';
+import { Ok } from '../../helpers/result';
 
 describe('modRunner tests', () => {
   it('gets the appropriate path to mods based on current dir', () => {
@@ -40,7 +41,7 @@ describe('modRunner tests', () => {
     let runCount = 0;
     const runCallBack = (foo: string): CodeModResult => {
       runCount = runCount + 1;
-      return {};
+      return Ok({ logs: [] });
     };
     const mods: CodeMod<string>[] = [
       {
@@ -65,7 +66,7 @@ describe('modRunner tests', () => {
 
   it('filters enabled and nothing Mods', () => {
     const runcallBack = (foo: string): CodeModResult => {
-      return {};
+      return Ok({ logs: [] });
     };
 
     // use a generator to simulate getting each mod back
@@ -89,6 +90,7 @@ describe('modRunner tests', () => {
     const gen = modGen();
 
     const filtered = getEnabledMods(
+      console,
       () => ['1', '2', '3', '4'],
       () => gen.next().value,
     );

packages/codemods/src/upgrade.ts

@@ -1,12 +1,13 @@
 import { runMods, getTsConfigs, getEnabledMods } from './modRunner/runnerUtilities';
 import { CommandParserResult } from './command';
+import { Logger } from './modRunner/logger';
 import { Project } from 'ts-morph';
-
-// TODO actually do console logging, implement some nice callbacks.
+// Injection point for logger so that it can easily be replaced.
+const logger: Logger = console;
 export function upgrade(options: CommandParserResult) {
-  const mods = getEnabledMods().filter(options.modsFilter);
+  const mods = getEnabledMods(logger).filter(options.modsFilter);
 
-  console.log('getting configs');
+  logger.log('getting configs');
   const configs = getTsConfigs();
 
   configs.forEach(configString => {
@@ -17,14 +18,14 @@ export function upgrade(options: CommandParserResult) {
       const files = project.getSourceFiles();
       runMods(mods, files, result => {
         if (result.error) {
-          console.error(`Error running mod ${result.mod.name} on file ${result.file.getBaseName()}`, result.error);
+          logger.error(`Error running mod ${result.mod.name} on file ${result.file.getBaseName()}`, result.error);
           error = true;
         } else {
-          console.log(`Upgraded file ${result.file.getBaseName()} with mod ${result.mod.name}`);
+          logger.log(`Upgraded file ${result.file.getBaseName()} with mod ${result.mod.name}`);
         }
       });
     } catch (e) {
-      console.error(e);
+      logger.error(e);
       error = true;
     }
     if (!error) {

packages/example-app-base/package.json

@@ -24,7 +24,7 @@
     "@fluentui/eslint-plugin": "^0.53.4",
     "@types/color-check": "0.0.0",
     "@types/jest": "~24.9.0",
-    "@types/markdown-to-jsx": "6.9.0",
+    "@types/markdown-to-jsx": "6.11.0",
     "@types/react": "16.8.25",
     "@types/react-custom-scrollbars": "^4.0.5",
     "@types/react-dom": "16.8.4",
@@ -48,7 +48,7 @@
     "@uifabric/set-version": "^7.0.21",
     "@uifabric/tsx-editor": "^0.11.129",
     "color-check": "0.0.2",
-    "markdown-to-jsx": "6.6.1",
+    "markdown-to-jsx": "6.11.4",
     "office-ui-fabric-core": "^11.0.0",
     "office-ui-fabric-react": "^7.128.1",
     "react-custom-scrollbars": "^4.2.1",

packages/react-avatar/package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@fluentui/react-conformance": "^0.1.0",
+    "@fluentui/storybook": "^0.2.8",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
     "@types/jest": "~24.9.0",
@@ -36,7 +37,7 @@
     "@types/react-test-renderer": "^16.0.0",
     "@types/webpack-env": "1.15.1",
     "@uifabric/build": "^7.0.0",
-    "@uifabric/jest-serializer-merge-styles": "^7.0.33",
+    "@uifabric/jest-serializer-merge-styles": "^7.0.35",
     "enzyme": "~3.10.0",
     "enzyme-adapter-react-16": "^1.15.0",
     "es6-weak-map": "^2.0.2",
@@ -46,13 +47,13 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-compose": "^0.14.4",
     "@fluentui/accessibility": "^0.51.0",
-    "@fluentui/react-theme-provider": "^0.7.1",
+    "@fluentui/react-compose": "^0.14.5",
     "@fluentui/react-stylesheets": "^0.1.16",
-    "@uifabric/set-version": "^7.0.19",
-    "@uifabric/react-hooks": "^7.8.1",
-    "@uifabric/utilities": "^7.27.1",
+    "@fluentui/react-theme-provider": "^0.7.2",
+    "@uifabric/react-hooks": "^7.8.2",
+    "@uifabric/set-version": "^7.0.21",
+    "@uifabric/utilities": "^7.28.0",
     "tslib": "^1.10.0"
   },
   "peerDependencies": {