Storybook overview and header bug (#1504)

* Adding our Overview page

* Adding the feedback and icons to header

* Typo on npm

* Fixing with ensuring it's loaded with setTimeout

* Update stories/feedback.stories.mdx

Co-authored-by: Nicolas Vogt <[email protected]>

Co-authored-by: Nicolas Vogt <[email protected]>

Author: sebastienlevert

.storybook/main.js

@@ -16,8 +16,9 @@ module.exports = {
     //   }
     // }
   ],
-  stories: ['../stories/**/*.@(js|mdx)'],
+  stories: ['../stories/overview.stories.mdx', '../stories/**/*.@(js|mdx)'],
   addons: [
+    '@storybook/addon-docs'
     // '@storybook/addon-a11y/register',
     // '@storybook/addon-actions/register',
     // '@storybook/addon-knobs/register',

.storybook/manager-head.html

@@ -19,12 +19,78 @@
   awa.init(config);
 
   window.onload = () => {
+    addUsefulLinks();
+  }
+
+  function addUsefulLinks() {
+    const linkStyle = 'color: black; text-decoration: none; text-align: center; cursor: pointer; padding-right: 0.5rem;';
+    const imageStyle = 'height: 0.75rem; margin-top: 0.125rem;';
+    const textStyle = 'margin-left: 0.25rem; font-size: 0.75rem;';
+    const linkContentStyle = 'display: flex;';
+    
+    const sidebarHeader = document.getElementsByClassName('sidebar-header');
+    if (sidebarHeader.length === 0) {
+      // sidebar container has not loaded in the page yet, retry in 500ms
+      setTimeout(addUsefulLinks, 500);
+      return false;
+    }
+    
     // This is a fix for an accessibility issue: https://github.com/microsoftgraph/microsoft-graph-toolkit/issues/1085
-    const sidebarHeader = document.getElementsByClassName('sidebar-header')[0];
+    const sidebarHeader = sidebarHeader[0];
     sidebarHeader.innerHTML = '<h1 tabindex="0" class="css-1su1ft1">' + '<a href="https://aka.ms/mgt" target="_blank" class="css-ixbm00">' +
       'Microsoft Graph Toolkit Playground</a>' +
       '</h1>';
+      
+    const sidebarNode = sidebarHeader[0].parentNode;
+
+    // GitHub
+    const githubImage = document.createElement('img');
+    githubImage.src = './github.png';
+    githubImage.style = imageStyle;
+
+    const githubText = document.createElement('span');
+    githubText.style = textStyle;
+    githubText.innerText = 'GitHub';
+
+    const repoLinkContent = document.createElement('span');
+    repoLinkContent.style = linkContentStyle;
+    repoLinkContent.append(githubImage, githubText);
+
+    const repoLink = document.createElement('a');
+    repoLink.href = 'https://aka.ms/mgt';
+    repoLink.target='_blank';
+    repoLink.style = linkStyle;
+    repoLink.appendChild(repoLinkContent);
+
+    // npm
+    const npmImage = document.createElement('img');
+    npmImage.src = './npm.png';
+    npmImage.style = imageStyle;
+
+    const npmText = document.createElement('span');
+    npmText.style = textStyle;
+    npmText.innerText = 'npm';
+
+    const npmLinkContent = document.createElement('span');
+    npmLinkContent.style = linkContentStyle;
+    npmLinkContent.append(npmImage, npmText);
+
+    const npmLink = document.createElement('a');
+    npmLink.href = 'https://www.npmjs.com/package/@microsoft/mgt';
+    npmLink.target='_blank';
+    npmLink.style = linkStyle + ' margin-left: 0.5rem;';
+    npmLink.appendChild(npmLinkContent);
+
+    // links container
+    const usefulLinksContainer = document.createElement('div');
+    usefulLinksContainer.id = 'useful-links';
+    usefulLinksContainer.style = 'display: flex; margin: 1rem 0rem; font-size: 0.875rem;';
+
+    usefulLinksContainer.append(repoLink, npmLink);
+
+    sidebarNode.insertBefore(usefulLinksContainer, sidebarNode.childNodes[1]);
   }
+</script>
 
 </script>
 

.storybook/preview-body.html

@@ -8,6 +8,13 @@
       'Helvetica Neue', sans-serif;
   }
 
+  .docs-img-centered {
+    display: block;
+    float: none;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
   body {
     margin: 0px;
   }

.storybook/preview.js

@@ -15,6 +15,11 @@ import customElements from '../custom-elements.json';
 setCustomElements(customElements);
 
 addParameters({
+  previewTabs: {
+    'storybook/docs/panel': {
+      hidden: true
+    }
+  },
   docs: {
     iframeHeight: '400px',
     inlineStories: false

assets/github.png

@@ -0,0 +1,25 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Feedback" />
+
+# Feedback
+
+In order to improve the Microsoft Graph Toolkit, we need your feedback!
+
+There are various ways for you to provide feedback of your experience and help us make the Toolkit better.
+
+## Contribute to Microsoft Graph Toolkit
+
+If there is a feature or bug you find and you are intersted in contributing directly to our code base please refer to our [contribution guide](https://github.com/microsoftgraph/microsoft-graph-toolkit/wiki).
+We encourage developers to feel welcomed into the code base and directly contribute.
+
+## Report Issues
+
+File feature requests, bugs or other issues against the [Microsoft Graph Toolkit repo](https://aka.ms/mgt/issues).
+To help us get to your issue faster use the GitHub labels provided.
+A team member will look to help out with outstanding issues and navigate them to the right owner.
+
+## Online Forums
+
+For any questions on Microsoft Graph Toolkit or Microsoft Graph, use [Microsoft Q&A](https://docs.microsoft.com/en-us/answers/topics/microsoft-graph-toolkit.html) or [Stack Overflow](https://stackoverflow.com/questions/tagged/microsoft-graph-toolkit).
+There use the tag `microsoft-graph-toolkit` for the question to be funneled to our team.

assets/mgt.png

@@ -0,0 +1,89 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Overview" />
+
+# Microsoft Graph Toolkit: UI Components and Authentication Providers for Microsoft Graph 
+
+The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic components and authentication providers for accessing and working with Microsoft Graph. The components are fully functional right of out of the box, with built in providers that authenticate with and fetch data from Microsoft Graph.
+
+<img src="graff.png" class="docs-img-centered" width="15%"/>
+
+The Microsoft Graph Toolkit makes it easy to use Microsoft Graph in your application. In the following example, a signed in user and their calendar events are displayed with just two lines of code by using the [Login](?path=/story/components-mgt-login--login) and [Agenda](?path=/story/components-mgt-agenda--simple) components.
+
+## Installing the Microsoft Graph Toolkit
+
+It's easy to get started! Add the Toolkit via our `mgt-loader` or via npm and you are ready to go!
+
+### Via the mgt-loader
+
+```html
+<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
+```
+
+### Via npm
+
+```shell
+npm i @microsoft/mgt
+```
+
+## What's in the Microsoft Graph Toolkit?
+
+### Components
+
+The Microsoft Graph Toolkit includes a collection of web components for the most commonly built experiences powered by Microsoft Graph APIs. 
+
+The components are also available as [React components](https://docs.microsoft.com/graph/toolkit/get-started/mgt-react).
+
+| Component                                                                                      | Description                                                                                                                                      |
+| ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Login](?path=/story/components-mgt-login--login)                                              | A button and a flyout control to authenticate a user with the Microsoft Identity platform and display the user's profile information on sign in. |
+| [Person](?path=/story/components-mgt-person--person)                                           | Displays a person or contact by their photo, name, and/or email address.                                                                         |
+| [People](?path=/story/components-mgt-people--people)                                           | Displays a group of people or contacts by their photos or initials.                                                                              |
+| [Agenda](?path=/story/components-mgt-agenda--simple)                                           | Displays events in a user or group's calendar.                                                                                                   |
+| [People picker](?path=/story/components-mgt-people-picker--people-picker)                      | Provides the ability to search for people and renders the list of results.                                                                       |
+| [Person card](?path=/story/components-mgt-person-card--person-card)                            | A flyout used on the person component to display more profile information about a user.                                                          |
+| [File](?path=/story/components-mgt-file--file)                                                 | Represents a file or folder with icon, filename, author, and more.                                                                               |
+| [File list](?path=/story/components-mgt-file-list--file-list)                                  | Displays a list of multiple files or folders.                                                                                                    |
+| [Get](?path=/story/components-mgt-get--get-email)                                              | Make a GET query to any Microsoft Graph API directly in your HTML.                                                                               |
+| [Teams Channel picker](?path=/story/components-mgt-teams-channel-picker--teams-channel-picker) | Provides the ability to search for Microsoft Teams channels to select a channel from a rendered list of results.                                 |
+| [To Do](?path=/story/components-mgt-todo--tasks)                                               | Displays and enables adding, removing, completing, or editing of tasks from Microsoft To Do.                                                     |
+| [Tasks](?path=/story/components-mgt-tasks--tasks)                                              | Displays and enables adding, removing, completing, or editing of tasks from Microsoft Planner or Microsoft To Do.                                |
+
+### Providers
+
+[Providers](https://docs.microsoft.com/graph/toolkit/providers/providers) enable authentication and provide the implementation for acquiring access tokens on various platforms and expose a Microsoft Graph client for calling the Microsoft Graph APIs. The components work best when used with a provider, but the providers can be used on their own.
+
+| Providers                                                                     | Description                                                                                                                           |
+| ----------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| [MSAL](https://docs.microsoft.com/graph/toolkit/providers/msal)               | Uses msal.js to sign in users and acquire tokens to use with Microsoft Graph.                                                         |
+| [MSAL2](https://docs.microsoft.com/graph/toolkit/providers/msal2)             | Uses msal-browser to sign in users and acquire tokens to use with Microsoft Graph.                                                    |
+| [Electron](https://docs.microsoft.com/graph/toolkit/providers/electron)       | Authenticates and provides Microsoft Graph access to components inside of Electron apps                                               |
+| [SharePoint](https://docs.microsoft.com/graph/toolkit/providers/sharepoint)   | Authenticates and provides Microsoft Graph access to components inside of SharePoint web parts.                                       |
+| [Teams](https://docs.microsoft.com/graph/toolkit/providers/teams)             | Uses msal.js to sign in users and acquire tokens on the client in Microsoft Teams tabs.                                               |
+| [Teams MSAL2](https://docs.microsoft.com/graph/toolkit/providers/teams-msal2) | Uses msal-browser to sign in users and acquire tokens in Microsoft Teams tabs. Supports Single Sign-On with custom backend.           |
+| [Proxy](https://docs.microsoft.com/graph/toolkit/providers/proxy)             | Allows the use of backend authentication by routing all calls to Microsoft Graph through your backend.                                |
+| [Custom](https://docs.microsoft.com/graph/toolkit/providers/custom)           | Create a custom provider to enable authentication and access to Microsoft Graph with your application's existing authentication code. |
+
+## Who should use it?
+
+The Microsoft Graph Toolkit is great for developers of all experience levels looking to develop an app that connects to and accesses data from Microsoft Graph, such as a:
+- Web app
+- Microsoft Teams tab
+- SharePoint web part
+- Progressive Web App (PWA)
+- Electron app
+
+## Where can I use it?
+
+The Microsoft Graph Toolkit is supported in the following browsers.
+
+| ![Edge](https://docs.microsoft.com/graph/toolkit/images/edgeIcon.png) | ![Firefox](https://docs.microsoft.com/graph/toolkit/images/firefoxIcon.png) | ![Chrome](https://docs.microsoft.com/graph/toolkit/images/chromeIcon.png) | ![Safari](https://docs.microsoft.com/graph/toolkit/images/safariIcon.png) | ![Opera](https://docs.microsoft.com/graph/toolkit/images/operaIcon.png) | ![Samsung Internet](https://docs.microsoft.com/graph/toolkit/images/samsungInternetIcon.png) |
+| --------------------------------------------------------------------- | --------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
+| **Edge**                                                              | **Firefox**                                                                 | **Chrome**                                                                | **Safari**                                                                | **Opera**                                                               | **Samsung**                                                                                  |
+
+
+## Next steps
+
+- Read our [documentation](https://aka.ms/mgt/docs).
+- [Get started](https://docs.microsoft.com/graph/toolkit/get-started/overview) with the Microsoft Graph Toolkit.
+- Check out the Microsoft Graph Toolkit on [GitHub](https://aka.ms/mgt).