docs: add react people-queries story (#3284)

Author: Mnickii

packages/mgt-components/src/components/mgt-person-card/mgt-person-card.graph.ts

@@ -48,7 +48,7 @@ export const getPersonCardGraphData = async (
   personDetails: IDynamicPerson,
   isMe: boolean
 ): Promise<MgtPersonCardState> => {
-  const userId: string = personDetails.id || (personDetails as Person).userPrincipalName;
+  const userId: string = personDetails?.id || (personDetails as Person)?.userPrincipalName;
   const email = getEmailFromGraphEntity(personDetails);
   const cache: CacheStore<CacheCardState> = CacheService.getCache<CacheCardState>(
     schemas.users,

packages/mgt-components/src/graph/graph.people.ts

@@ -216,7 +216,7 @@ export const getEmailFromGraphEntity = (entity: IDynamicPerson): string => {
   const user = entity as User;
   const contact = entity as Contact;
 
-  if (user.mail) {
+  if (user?.mail) {
     return extractEmailAddress(user.mail);
   } else if (person.scoredEmailAddresses?.length) {
     return extractEmailAddress(person.scoredEmailAddresses[0].address);

samples/react-contoso/src/pages/HomePage.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { PageHeader } from '../components/PageHeader';
+import { People } from '@microsoft/mgt-react';
+const peopleDisplay: string[] = ['LidiaH', 'Megan Bowen', 'Lynne Robbins', 'JoniS'];
 
 const HomePage: React.FunctionComponent = () => {
   return (
     <>
       <PageHeader title={'Home'} description={'Welcome to Contoso!'}></PageHeader>
+      <People peopleQueries={peopleDisplay}></People>
     </>
   );
 };

stories/components/people/people.react.stories.js

@@ -24,3 +24,15 @@ export const People = () => html`
     );
   </react>
 `;
+
+export const PeopleQueries = () => html`
+  <mgt-people></mgt-people>
+  <react>
+    import { People } from '@microsoft/mgt-react';
+    const peopleDisplay: string[] = ['LidiaH', 'Megan Bowen', 'Lynne Robbins', 'JoniS'];
+
+    export default () => (
+      <People peopleQueries={peopleDisplay}></People>
+    );
+  </react>
+`;