update mgt-react to use wc-react 0.4, react sample is now ts (#888)

Author: nmetulev

packages/mgt-react/package.json

@@ -33,9 +33,9 @@
   "dependencies": {
     "@microsoft/mgt-components": "*",
     "@microsoft/mgt-element": "*",
-    "@microsoft/microsoft-graph-types": "^1.27.0",
+    "@microsoft/microsoft-graph-types": "^1.28.0",
     "@microsoft/microsoft-graph-types-beta": "github:microsoftgraph/msgraph-typescript-typings#beta",
-    "wc-react": "^0.3.1"
+    "wc-react": "^0.4.0"
   },
   "publishConfig": {
     "access": "public"

packages/mgt-react/scripts/generate.js

@@ -40,10 +40,7 @@ for (const tag of wc.tags) {
     className: className
   });
 
-  const props = {
-    className: 'string',
-    id: 'string'
-  };
+  const props = {};
 
   for (const prop of tag.properties) {
     if (prop.type) {

packages/mgt-react/src/Mgt.ts

@@ -30,7 +30,7 @@ export class Mgt extends Wc {
   public render() {
     const tag = this.getTag();
     if (!tag) {
-      throw '"type" must be set!';
+      throw '"wcType" must be set!';
     }
 
     this.processTemplates(this.props.children);
@@ -142,6 +142,6 @@ export class Mgt extends Wc {
  */
 export const wrapMgt = <T = WcProps>(tag: string) => {
   const component: React.FC<T & React.HTMLAttributes<any>> = (props: T) =>
-    React.createElement(Mgt, { type: tag, ...props });
+    React.createElement(Mgt, { wcType: tag, ...props });
   return component;
 };

packages/mgt-react/src/generated/react.ts

@@ -5,8 +5,6 @@ import * as MicrosoftGraphBeta from '@microsoft/microsoft-graph-types-beta';
 import {wrapMgt} from '../Mgt';
 
 export type AgendaProps = {
-	className?: string;
-	id?: string;
 	date?: string;
 	groupId?: string;
 	days?: number;
@@ -21,8 +19,6 @@ export type AgendaProps = {
 }
 
 export type GetProps = {
-	className?: string;
-	id?: string;
 	resource?: string;
 	scopes?: string[];
 	version?: string;
@@ -37,8 +33,6 @@ export type GetProps = {
 }
 
 export type LoginProps = {
-	className?: string;
-	id?: string;
 	userDetails?: IDynamicPerson;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
@@ -50,8 +44,6 @@ export type LoginProps = {
 }
 
 export type PeoplePickerProps = {
-	className?: string;
-	id?: string;
 	groupId?: string;
 	type?: PersonType;
 	groupType?: GroupType;
@@ -68,8 +60,6 @@ export type PeoplePickerProps = {
 }
 
 export type PeopleProps = {
-	className?: string;
-	id?: string;
 	groupId?: string;
 	userIds?: string[];
 	people?: IDynamicPerson[];
@@ -82,8 +72,6 @@ export type PeopleProps = {
 }
 
 export type PersonCardProps = {
-	className?: string;
-	id?: string;
 	personDetails?: IDynamicPerson;
 	personQuery?: string;
 	userId?: string;
@@ -98,8 +86,6 @@ export type PersonCardProps = {
 }
 
 export type PersonProps = {
-	className?: string;
-	id?: string;
 	config?: MgtPersonConfig;
 	personQuery?: string;
 	userId?: string;
@@ -122,8 +108,6 @@ export type PersonProps = {
 }
 
 export type TasksProps = {
-	className?: string;
-	id?: string;
 	res?: TasksStringResource;
 	isNewTaskVisible?: boolean;
 	readOnly?: boolean;
@@ -145,17 +129,13 @@ export type TasksProps = {
 }
 
 export type TeamsChannelPickerProps = {
-	className?: string;
-	id?: string;
 	selectedItem?: SelectedChannel;
 	templateContext?: TemplateContext;
 	mediaQuery?: ComponentMediaQuery;
 	selectionChanged?: (e: Event) => void;
 }
 
 export type TodoProps = {
-	className?: string;
-	id?: string;
 	taskFilter?: TodoFilter;
 	readOnly?: boolean;
 	hideHeader?: boolean;

samples/react-app/package.json

@@ -3,8 +3,9 @@
   "version": "1.3.0",
   "private": true,
   "dependencies": {
-    "@microsoft/mgt": "*",
+    "@microsoft/mgt-element": "*",
     "@microsoft/mgt-react": "*",
+    "@microsoft/mgt-msal-provider": "*",
     "@webcomponents/webcomponentsjs": "2.2.10",
     "react": "^16.8.5",
     "react-app-polyfill": "1.0.1",

samples/react-app/src/App.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import {
+  Login,
+  Agenda,
+  Person,
+  PeoplePicker,
+  PersonViewType,
+  PersonType,
+  MgtTemplateProps
+} from '@microsoft/mgt-react';
+import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
+
+class App extends Component {
+  render() {
+    const personDetails = {
+      displayName: 'Nikola Metulev',
+      mail: '[email protected]'
+    };
+
+    return (
+      <div className="App">
+        <Login loginCompleted={() => console.log('login completed')} />
+        <Agenda groupByDay>
+          <MyEvent template="event" />
+        </Agenda>
+
+        <Person
+          personDetails={personDetails}
+          view={PersonViewType.twolines}
+          className="my-class"
+          onClick={() => console.log('person clicked')}
+          line2clicked={() => console.log('line1 clicked')}
+        />
+
+        <PeoplePicker type={PersonType.any} />
+      </div>
+    );
+  }
+}
+
+const MyEvent = (props: MgtTemplateProps) => {
+  const { event } = props.dataContext as { event: MicrosoftGraph.Event };
+  return <div>{event.subject}</div>;
+};
+
+export default App;

samples/react-app/src/App.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+import { Providers, MockProvider } from '@microsoft/mgt-element';
+
+// uncomment to use MSAL provider with your own ClientID (also comment out mock provider below)
+// import { MsalProvider } from '@microsoft/mgt-msal-provider';
+// Providers.globalProvider = new MsalProvider({ clientId: 'a974dfa0-9f57-49b9-95db-90f04ce2111a' });
+
+Providers.globalProvider = new MockProvider(true);
+
+ReactDOM.render(<App />, document.getElementById('root'));

samples/react-app/src/index.js

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />