sp-webpart sample cleanup

Author: nmetulev

samples/sp-webpart/.gitignore

@@ -32,3 +32,5 @@ obj
 
 # Styles Generated Code
 *.scss.ts
+
+sharepoint

samples/sp-webpart/package.json

@@ -16,7 +16,6 @@
     "@microsoft/sp-office-ui-fabric-core": "1.12.1",
     "@microsoft/sp-property-pane": "1.12.1",
     "@microsoft/sp-webpart-base": "1.12.1",
-    "@webcomponents/webcomponentsjs": "^2.4.3",
     "office-ui-fabric-react": "7.156.0",
     "react": "16.9.0",
     "react-dom": "16.9.0"
@@ -25,22 +24,15 @@
     "@types/react": "16.9.36"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.3",
-    "@babel/preset-env": "^7.10.3",
-    "@microsoft/rush-stack-compiler-3.7": "0.2.9",
+    "@types/react": "16.9.36",
+    "@types/react-dom": "16.9.8",
     "@microsoft/sp-build-web": "1.12.1",
-    "@microsoft/sp-module-interfaces": "1.12.1",
     "@microsoft/sp-tslint-rules": "1.12.1",
+    "@microsoft/sp-module-interfaces": "1.12.1",
     "@microsoft/sp-webpart-workbench": "1.12.1",
-    "@types/es6-promise": "0.0.33",
-    "@types/react": "16.9.36",
-    "@types/react-dom": "16.9.8",
-    "@types/webpack-env": "1.13.1",
-    "ajv": "~5.2.2",
-    "babel-loader": "^8.1.0",
+    "@microsoft/rush-stack-compiler-3.7": "0.2.9",
     "gulp": "4.0.2",
-    "regenerator-runtime": "^0.13.5",
-    "typescript": "^3.4.3",
-    "webpack": "^4.43.0"
+    "ajv": "~5.2.2",
+    "@types/webpack-env": "1.13.1"
   }
 }

samples/sp-webpart/src/webparts/mgtDemo/MgtDemoWebPart.ts

@@ -4,16 +4,6 @@ import { Version } from '@microsoft/sp-core-library';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
 import { IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
 
-// import web component polyfills for browsers that need them
-import 'regenerator-runtime/runtime';
-import 'core-js/es/number';
-import 'core-js/es/math';
-import 'core-js/es/string';
-import 'core-js/es/date';
-import 'core-js/es/array';
-import 'core-js/es/regexp';
-import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
-
 import * as strings from 'MgtDemoWebPartStrings';
 import MgtDemo from './components/MgtDemo';
 import { IMgtDemoProps } from './components/IMgtDemoProps';
@@ -26,19 +16,15 @@ export interface IMgtDemoWebPartProps {
 }
 
 export default class MgtDemoWebPart extends BaseClientSideWebPart<IMgtDemoWebPartProps> {
-
   // set the global provider
   protected async onInit() {
     Providers.globalProvider = new SharePointProvider(this.context);
   }
 
   public render(): void {
-    const element: React.ReactElement<IMgtDemoProps> = React.createElement(
-      MgtDemo,
-      {
-        description: this.properties.description
-      }
-    );
+    const element: React.ReactElement<IMgtDemoProps> = React.createElement(MgtDemo, {
+      description: this.properties.description
+    });
 
     ReactDom.render(element, this.domElement);
   }

samples/sp-webpart/src/webparts/mgtDemo/components/MgtDemo.tsx

@@ -1,19 +1,26 @@
 import * as React from 'react';
 import styles from './MgtDemo.module.scss';
 import { IMgtDemoProps } from './IMgtDemoProps';
-import { Person, People, Agenda, TeamsChannelPicker, Tasks, PeoplePicker } from '@microsoft/mgt-react';
-import { PersonViewType, PersonCardInteraction } from '@microsoft/mgt';
 
+// to ensure your webpart is leveraging the shared mgt library,
+// make sure you are only importing from
+//  - @microsoft/mgt-react/dist/es6/spfx
+//  - @microsoft/mgt-sfpx
+// and no other mgt packages
+import { Person, People, Agenda, TeamsChannelPicker, Tasks, PeoplePicker } from '@microsoft/mgt-react/dist/es6/spfx';
+import { PersonViewType, PersonCardInteraction } from '@microsoft/mgt-spfx';
 
 export default class MgtDemo extends React.Component<IMgtDemoProps, {}> {
   public render(): React.ReactElement<IMgtDemoProps> {
     return (
       <div className={styles.mgtDemo}>
         <div className={styles.container}>
-          <Person personQuery="me"
+          <Person
+            personQuery="me"
             view={PersonViewType.twolines}
             personCardInteraction={PersonCardInteraction.hover}
-            showPresence={true}></Person>
+            showPresence={true}
+          ></Person>
 
           <People></People>