Migrate base component and provider structures to mgt-element package (#594)

* Migrated Providers and IProvider to mgt-element

* Migrated baseComponent to mgt-element

* Migrated template helper to mgt-element

* Migrated templatedComponent to mgt-element

* Updated tsconfigs to fix debugging

* Migrated Providers and IProvider to mgt-element

* Migrated baseComponent to mgt-element

* Migrated template helper to mgt-element

* Migrated templatedComponent to mgt-element

* Updated tsconfigs to fix debugging

* Merged react work with base-component work

* Updated readme with samples guidance

* Added preview doc for mgt-element

* Fixed samples

* Fixed storybook

* Fixed typo and removed console log

* Update generated react.ts

Co-authored-by: Nikola Metulev <[email protected]>

Author: shweaver-MSFT

.storybook/addons/signInAddon/signInAddon.js

@@ -1,6 +1,6 @@
 import addons, { makeDecorator } from '@storybook/addons';
-import { Providers } from '../../../packages/mgt/dist/es6/Providers';
-import { ProviderState } from '../../../packages/mgt/dist/es6/providers/IProvider';
+import { Providers } from '../../../packages/mgt-element/dist/providers/Providers';
+import { ProviderState } from '../../../packages/mgt-element/dist/providers/IProvider';
 import { MsalProvider } from '../../../packages/mgt/dist/es6/providers/MsalProvider';
 import { MockProvider } from '../../../packages/mgt/dist/es6/mock/MockProvider';
 import { CLIENTID, SETPROVIDER_EVENT, GETPROVIDER_EVENT } from '../../env';

.storybook/manager.js

@@ -10,7 +10,8 @@ import { addons, types } from '@storybook/addons';
 import { STORIES_CONFIGURED, STORY_MISSING } from '@storybook/core-events';
 import { AddonPanel } from '@storybook/components';
 import { useParameter, useChannel } from '@storybook/api';
-import { Providers, MsalProvider, LoginType } from '../packages/mgt/dist/commonjs';
+import { MsalProvider } from '../packages/mgt/dist/commonjs';
+import { Providers, LoginType } from '../packages/mgt-element/dist';
 import { CLIENTID, GETPROVIDER_EVENT, SETPROVIDER_EVENT } from './env';
 
 const PARAM_KEY = 'signInAddon';

docs/preview/mgt-element.md

@@ -0,0 +1,20 @@
+# @microsoft/mgt-element
+
+Going forward in version 2, Microsoft Graph Toolkit will be broken up into multiple packages. This allows developers to take what they need from the toolkit and avoid any unnecessary parts.
+
+`@microsft/mgt-element` is the first of these packages. It contains the low level interfaces and base classes that all MGT components and providers are built upon.
+
+The most notable change for consuming apps is the relocation of the `Providers` class. Access to the global provider instance is managed through `Providers`, so any module references will need to import from `@microsoft/mgt-element` instead.
+
+```ts
+<script type="module">
+    import { MsalProvider } from '@microsoft/mgt';
+    import { IGraph, IProvider, Providers } from '@microsoft/mgt-element'
+
+    const provider: IProvider = new MsalProvider({ clientId: '[CLIENT-ID]' });
+    Providers.globalProvider = provider;
+
+    const graph: IGraph = provider.graph;
+    const me: any = await graph.api('/me').get();
+</script>
+```

packages/mgt/src/components/baseComponent.ts renamed to packages/mgt-element/src/components/baseComponent.ts

@@ -5,8 +5,8 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { LitElement, property, PropertyValues } from 'lit-element';
-import { Providers } from '../Providers';
+import { LitElement, PropertyValues } from 'lit-element';
+import { Providers } from '../providers/Providers';
 
 /**
  * Defines media query based on component width
@@ -64,7 +64,7 @@ export abstract class MgtBaseComponent extends LitElement {
    * Gets the ComponentMediaQuery of the component
    *
    * @readonly
-   * @type {ComponentMediaQuery}
+   * @type {MgtElement.ComponentMediaQuery}
    * @memberof MgtBaseComponent
    */
   public get mediaQuery(): ComponentMediaQuery {

packages/mgt/src/components/templatedComponent.ts renamed to packages/mgt-element/src/components/templatedComponent.ts

@@ -6,10 +6,10 @@
  */
 
 import { html, PropertyValues } from 'lit-element';
-import { TemplateContext } from '../graph/types';
-import { equals } from '../utils/Utils';
+import { TemplateContext } from '../utils/TemplateContext';
+import { equals } from '../utils/equals';
 import { MgtBaseComponent } from './baseComponent';
-import { TemplateHelper } from './templateHelper';
+import { TemplateHelper } from '../utils/TemplateHelper';
 
 /**
  * Lookup for rendered component templates and contexts by slot name.
@@ -39,7 +39,7 @@ export abstract class MgtTemplatedComponent extends MgtBaseComponent {
   /**
    * Collection of functions to be used in template binding
    *
-   * @type {TemplateContext}
+   * @type {MgtElement.TemplateContext}
    * @memberof MgtTemplatedComponent
    * @deprecated since 1.2 - use templateContext instead
    */
@@ -49,7 +49,7 @@ export abstract class MgtTemplatedComponent extends MgtBaseComponent {
    * Additional data context to be used in template binding
    * Use this to add event listeners or value converters
    *
-   * @type {TemplateContext}
+   * @type {MgtElement.TemplateContext}
    * @memberof MgtTemplatedComponent
    */
   public templateContext: TemplateContext;

packages/mgt-element/src/index.ts

@@ -7,3 +7,11 @@
 
 export * from './IBatch';
 export * from './IGraph';
+export * from './components/baseComponent';
+export * from './components/templatedComponent';
+export * from './providers/IProvider';
+export * from './providers/Providers';
+export * from './utils/EventDispatcher';
+export * from './utils/TemplateContext';
+export * from './utils/TemplateHelper';
+export * from './utils/equals';

packages/mgt/src/providers/IProvider.ts renamed to packages/mgt-element/src/providers/IProvider.ts

@@ -7,8 +7,9 @@
 
 import { AuthenticationProvider } from '@microsoft/microsoft-graph-client/lib/es/IAuthenticationProvider';
 import { AuthenticationProviderOptions } from '@microsoft/microsoft-graph-client/lib/es/IAuthenticationProviderOptions';
-import { Graph } from '../Graph';
+import { IGraph } from '../IGraph';
 import { EventDispatcher, EventHandler } from '../utils/EventDispatcher';
+
 /**
  * Provider Type to be extended for implmenting new providers
  *
@@ -24,7 +25,7 @@ export abstract class IProvider implements AuthenticationProvider {
    * @type {Graph}
    * @memberof IProvider
    */
-  public graph: Graph;
+  public graph: IGraph;
   private _state: ProviderState;
   private _loginChangedDispatcher = new EventDispatcher<LoginChangedEvent>();
   /**

packages/mgt/src/Providers.ts renamed to packages/mgt-element/src/providers/Providers.ts

@@ -5,8 +5,9 @@
  * -------------------------------------------------------------------------------------------
  */
 
-import { IProvider } from './providers/IProvider';
-import { EventDispatcher, EventHandler } from './utils/EventDispatcher';
+import { IProvider } from './IProvider';
+import { EventDispatcher, EventHandler } from '../utils/EventDispatcher';
+
 /**
  * Provides implementation for acquiring the necessary access token for calling the Microsoft Graph APIs.
  *

packages/mgt/src/utils/EventDispatcher.ts renamed to packages/mgt-element/src/utils/EventDispatcher.ts

@@ -0,0 +1,13 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+/**
+ * Template context object
+ */
+export interface TemplateContext {
+  [prop: string]: any;
+}