honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

removed custom theme shim; 

updated to fluent ui 9.20;
updated to SPFx 1.17.2
This commit is contained in:
Nick Brown 2023-05-15 21:26:46 +01:00
parent 48a0c1d4be
commit afe315334b
9 changed files with 27 additions and 1272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
samples/react-group-membership-manager/README.md
View File

@ -13,7 +13,7 @@ This app is an example of managing the membership of a group you own including t
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
![SPFx 1.16.1](https://img.shields.io/badge/SPFx-1.16.1-green.svg)
![SPFx 1.17.2](https://img.shields.io/badge/SPFx-1.17.2-green.svg)
![Node.js v16](https://img.shields.io/badge/Node.js-v16-green.svg)
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
@ -38,7 +38,8 @@ This app is an example of managing the membership of a group you own including t
| Version | Date | Comments |
| ------- | ---------------- | --------------- |
| 1.0 | August 25, 2022 | Initial release |
| 1.1| | Jan 18, 2022 | Updated to SPFx 1.16.1 |
| 1.1 | Jan 18, 2022 | Updated to SPFx 1.16.1 |
| 1.2 | May 15, 2023 | Updated to SPFx 1.17.2, FluentUI 9.20, removed custom theme shim |
## Minimal Path to Awesome

4
samples/react-group-membership-manager/assets/sample.json
View File

@ -10,7 +10,7 @@
"This app is an example of managing the membership of a group you own including the owners of the group as well as using FluentUI v9"
],
"creationDateTime": "2022-08-25",
"updateDateTime": "2023-01-18",
"updateDateTime": "2023-05-15",
"products": [
"SharePoint"
],
@ -21,7 +21,7 @@
},
{
"key": "SPFX-VERSION",
"value": "1.16.1"
"value": "1.17.2"
}
],
"thumbnails": [

2
samples/react-group-membership-manager/config/serve.json
View File

@ -2,5 +2,5 @@
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
"port": 4321,
"https": true,
"initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
}

31
samples/react-group-membership-manager/package.json
View File

@ -12,30 +12,33 @@
"test": "gulp test"
},
"dependencies": {
"@fluentui/react-components": "^9.10.1",
"@microsoft/sp-component-base": "^1.16.1",
"@microsoft/sp-core-library": "1.16.1",
"@microsoft/sp-lodash-subset": "1.16.1",
"@microsoft/sp-office-ui-fabric-core": "1.16.1",
"@microsoft/sp-property-pane": "1.16.1",
"@microsoft/sp-webpart-base": "1.16.1",
"@fluentui/react-components": "^9.20.0",
"@fluentui/react-migration-v8-v9": "^9.2.11",
"@microsoft/microsoft-graph-types": "^2.31.0",
"@microsoft/sp-component-base": "1.17.2",
"@microsoft/sp-core-library": "1.17.2",
"@microsoft/sp-lodash-subset": "1.17.2",
"@microsoft/sp-office-ui-fabric-core": "1.17.2",
"@microsoft/sp-property-pane": "1.17.2",
"@microsoft/sp-webpart-base": "1.17.2",
"office-ui-fabric-react": "^7.204.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"tslib": "2.3.1"
},
"devDependencies": {
"@microsoft/eslint-config-spfx": "1.16.1",
"@microsoft/eslint-plugin-spfx": "1.16.1",
"@microsoft/microsoft-graph-types": "^2.25.0",
"@microsoft/rush-stack-compiler-4.5": "0.2.2",
"@microsoft/sp-build-web": "1.16.1",
"@microsoft/sp-module-interfaces": "1.16.1",
"@microsoft/eslint-config-spfx": "1.17.2",
"@microsoft/eslint-plugin-spfx": "1.17.2",
"@microsoft/rush-stack-compiler-4.5": "0.5.0",
"@microsoft/sp-build-web": "1.17.2",
"@microsoft/sp-module-interfaces": "1.17.2",
"@rushstack/eslint-config": "2.5.1",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"@types/webpack-env": "~1.15.2",
"ajv": "^6.12.5",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint": "8.7.0",
"eslint-plugin-react-hooks": "4.3.0",
"gulp": "4.0.2",
"typescript": "4.5.5"
}

1075
samples/react-group-membership-manager/src/shims/themeDuplicates.ts
View File

File diff suppressed because it is too large Load Diff

173
samples/react-group-membership-manager/src/shims/v9ThemeShim.ts
View File

@ -1,173 +0,0 @@
import { IPalette, ITheme as ThemeV8 } from '@microsoft/sp-component-base';
import { ColorTokens, Theme as ThemeV9, webLightTheme } from '@fluentui/react-components';
import { blackAlpha, whiteAlpha, grey } from './themeDuplicates';
/**
* Creates v9 color tokens from a v8 palette.
* https://github.com/microsoft/fluentui/blob/master/apps/public-docsite-v9/src/shims/ThemeShim/v9ThemeShim.ts
*/
const mapAliasColors = (palette: Partial<IPalette>, inverted: boolean): ColorTokens => {
return {
colorNeutralForeground1: palette.neutralPrimary || webLightTheme.colorNeutralForeground1,
colorNeutralForeground1Hover: palette.neutralPrimary || webLightTheme.colorNeutralForeground1Hover,
colorNeutralForeground1Pressed: palette.neutralPrimary || webLightTheme.colorNeutralForeground1Pressed,
colorNeutralForeground1Selected: palette.neutralPrimary || webLightTheme.colorNeutralForeground1Selected,
colorNeutralForeground2: palette.neutralSecondary || webLightTheme.colorNeutralForeground2,
colorNeutralForeground2Hover: palette.neutralPrimary || webLightTheme.colorNeutralForeground2Hover,
colorNeutralForeground2Pressed: palette.neutralPrimary || webLightTheme.colorNeutralForeground2Pressed,
colorNeutralForeground2Selected: palette.neutralPrimary || webLightTheme.colorNeutralForeground2Selected,
colorNeutralForeground2BrandHover: palette.themePrimary || webLightTheme.colorNeutralForeground2BrandHover,
colorNeutralForeground2BrandPressed: palette.themeDarkAlt || webLightTheme.colorNeutralForeground2BrandPressed,
colorNeutralForeground2BrandSelected: palette.themePrimary || webLightTheme.colorNeutralForeground2BrandSelected,
colorNeutralForeground3: palette.neutralTertiary || webLightTheme.colorNeutralForeground3,
colorNeutralForeground3Hover: palette.neutralSecondary || webLightTheme.colorNeutralForeground3Hover,
colorNeutralForeground3Pressed: palette.neutralSecondary || webLightTheme.colorNeutralForeground3Pressed,
colorNeutralForeground3Selected: palette.neutralSecondary || webLightTheme.colorNeutralForeground3Selected,
colorNeutralForeground3BrandHover: palette.themePrimary || webLightTheme.colorNeutralForeground3BrandHover,
colorNeutralForeground3BrandPressed: palette.themeDarkAlt || webLightTheme.colorNeutralForeground3BrandPressed,
colorNeutralForeground3BrandSelected: palette.themePrimary || webLightTheme.colorNeutralForeground3BrandSelected,
colorNeutralForeground4: palette.neutralQuaternary || webLightTheme.colorNeutralForeground4,
colorNeutralForegroundDisabled: palette.neutralTertiaryAlt || webLightTheme.colorNeutralForegroundDisabled,
colorNeutralForegroundInvertedDisabled: whiteAlpha[40],
colorBrandForegroundLink: palette.themeDarkAlt || webLightTheme.colorBrandForegroundLink,
colorBrandForegroundLinkHover: palette.themeDark || webLightTheme.colorBrandForegroundLinkHover,
colorBrandForegroundLinkPressed: palette.themeDarker || webLightTheme.colorBrandForegroundLinkPressed,
colorBrandForegroundLinkSelected: palette.themeDarkAlt || webLightTheme.colorBrandForegroundLinkSelected,
colorNeutralForeground2Link: palette.neutralSecondary || webLightTheme.colorNeutralForeground2Link,
colorNeutralForeground2LinkHover: palette.neutralPrimary || webLightTheme.colorNeutralForeground2LinkHover,
colorNeutralForeground2LinkPressed: palette.neutralPrimary || webLightTheme.colorNeutralForeground2LinkPressed,
colorNeutralForeground2LinkSelected: palette.neutralPrimary || webLightTheme.colorNeutralForeground2LinkSelected,
colorCompoundBrandForeground1: palette.themePrimary || webLightTheme.colorCompoundBrandForeground1,
colorCompoundBrandForeground1Hover: palette.themeDarkAlt || webLightTheme.colorCompoundBrandForeground1Hover,
colorCompoundBrandForeground1Pressed: palette.themeDark || webLightTheme.colorCompoundBrandForeground1Pressed,
colorBrandForeground1: palette.themePrimary || webLightTheme.colorBrandForeground1,
colorBrandForeground2: palette.themeDarkAlt || webLightTheme.colorBrandForeground2,
colorNeutralForeground1Static: palette.neutralPrimary || webLightTheme.colorNeutralForeground1Static,
colorNeutralForegroundInverted: palette.white || webLightTheme.colorNeutralForegroundInverted,
colorNeutralForegroundInvertedHover: palette.white || webLightTheme.colorNeutralForegroundInvertedHover,
colorNeutralForegroundInvertedPressed: palette.white || webLightTheme.colorNeutralForegroundInvertedPressed,
colorNeutralForegroundInvertedSelected: palette.white || webLightTheme.colorNeutralForegroundInvertedSelected,
colorNeutralForegroundOnBrand: palette.white || webLightTheme.colorNeutralForegroundOnBrand,
colorNeutralForegroundStaticInverted: palette.white || webLightTheme.colorNeutralForegroundStaticInverted,
colorNeutralForegroundInvertedLink: palette.white || webLightTheme.colorNeutralForegroundInvertedLink,
colorNeutralForegroundInvertedLinkHover: palette.white || webLightTheme.colorNeutralForegroundInvertedLinkHover,
colorNeutralForegroundInvertedLinkPressed: palette.white || webLightTheme.colorNeutralForegroundInvertedLinkPressed,
colorNeutralForegroundInvertedLinkSelected: palette.white || webLightTheme.colorNeutralForegroundInvertedLinkSelected,
colorNeutralForegroundInverted2: palette.white || webLightTheme.colorNeutralForegroundInverted2,
colorBrandForegroundInverted: palette.themeSecondary || webLightTheme.colorBrandForegroundInverted,
colorBrandForegroundInvertedHover: palette.themeTertiary || webLightTheme.colorBrandForegroundInvertedHover,
colorBrandForegroundInvertedPressed: palette.themeSecondary || webLightTheme.colorBrandForegroundInvertedPressed,
colorBrandForegroundOnLight: palette.themePrimary || webLightTheme.colorBrandForegroundOnLight,
colorBrandForegroundOnLightHover: palette.themeDarkAlt || webLightTheme.colorBrandForegroundOnLightHover,
colorBrandForegroundOnLightPressed: palette.themeDark || webLightTheme.colorBrandForegroundOnLightPressed,
colorBrandForegroundOnLightSelected: palette.themeDark || webLightTheme.colorBrandForegroundOnLightSelected,
colorNeutralBackground1: palette.white || webLightTheme.colorNeutralBackground1,
colorNeutralBackground1Hover: palette.neutralLighter || webLightTheme.colorNeutralBackground1Hover,
colorNeutralBackground1Pressed: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralBackground1Pressed,
colorNeutralBackground1Selected: palette.neutralLight || webLightTheme.colorNeutralBackground1Selected,
colorNeutralBackground2: palette.neutralLighterAlt || webLightTheme.colorNeutralBackground2,
colorNeutralBackground2Hover: palette.neutralLighter || webLightTheme.colorNeutralBackground2Hover,
colorNeutralBackground2Pressed: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralBackground2Pressed,
colorNeutralBackground2Selected: palette.neutralLight || webLightTheme.colorNeutralBackground2Selected,
colorNeutralBackground3: palette.neutralLighter || webLightTheme.colorNeutralBackground3,
colorNeutralBackground3Hover: palette.neutralLight || webLightTheme.colorNeutralBackground3Hover,
colorNeutralBackground3Pressed: palette.neutralQuaternary || webLightTheme.colorNeutralBackground3Pressed,
colorNeutralBackground3Selected: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralBackground3Selected,
colorNeutralBackground4: palette.neutralLighter || webLightTheme.colorNeutralBackground4,
colorNeutralBackground4Hover: palette.neutralLighterAlt || webLightTheme.colorNeutralBackground4Hover,
colorNeutralBackground4Pressed: palette.neutralLighter || webLightTheme.colorNeutralBackground4Pressed,
colorNeutralBackground4Selected: palette.white || webLightTheme.colorNeutralBackground4Selected,
colorNeutralBackground5: palette.neutralLight || webLightTheme.colorNeutralBackground5,
colorNeutralBackground5Hover: palette.neutralLighter || webLightTheme.colorNeutralBackground5Hover,
colorNeutralBackground5Pressed: palette.neutralLighter || webLightTheme.colorNeutralBackground5Pressed,
colorNeutralBackground5Selected: palette.neutralLighterAlt || webLightTheme.colorNeutralBackground5Selected,
colorNeutralBackground6: palette.neutralLight || webLightTheme.colorNeutralBackground6,
colorNeutralBackgroundStatic: grey[20],
colorNeutralBackgroundInverted: palette.neutralSecondary || webLightTheme.colorNeutralBackgroundInverted,
colorSubtleBackground: 'transparent',
colorSubtleBackgroundHover: palette.neutralLighter || webLightTheme.colorSubtleBackgroundHover,
colorSubtleBackgroundPressed: palette.neutralQuaternaryAlt || webLightTheme.colorSubtleBackgroundPressed,
colorSubtleBackgroundSelected: palette.neutralLight || webLightTheme.colorSubtleBackgroundSelected,
colorSubtleBackgroundLightAlphaHover: inverted ? whiteAlpha[10] : whiteAlpha[80],
colorSubtleBackgroundLightAlphaPressed: inverted ? whiteAlpha[5] : whiteAlpha[50],
colorSubtleBackgroundLightAlphaSelected: 'transparent',
colorSubtleBackgroundInverted: 'transparent',
colorSubtleBackgroundInvertedHover: blackAlpha[10],
colorSubtleBackgroundInvertedPressed: blackAlpha[30],
colorSubtleBackgroundInvertedSelected: blackAlpha[20],
colorTransparentBackground: 'transparent',
colorTransparentBackgroundHover: 'transparent',
colorTransparentBackgroundPressed: 'transparent',
colorTransparentBackgroundSelected: 'transparent',
colorNeutralBackgroundDisabled: palette.neutralLighter || webLightTheme.colorNeutralBackgroundDisabled,
colorNeutralBackgroundInvertedDisabled: whiteAlpha[10],
colorNeutralStencil1: palette.neutralLight || webLightTheme.colorNeutralStencil1,
colorNeutralStencil2: palette.neutralLighterAlt || webLightTheme.colorNeutralStencil2,
colorBackgroundOverlay: blackAlpha[10],
colorScrollbarOverlay: blackAlpha[50],
colorBrandBackground: palette.themePrimary || webLightTheme.colorBrandBackground,
colorBrandBackgroundHover: palette.themeDarkAlt || webLightTheme.colorBrandBackgroundHover,
colorBrandBackgroundPressed: palette.themeDarker || webLightTheme.colorBrandBackgroundPressed,
colorBrandBackgroundSelected: palette.themeDark || webLightTheme.colorBrandBackgroundSelected,
colorCompoundBrandBackground: palette.themePrimary || webLightTheme.colorCompoundBrandBackground,
colorCompoundBrandBackgroundHover: palette.themeDarkAlt || webLightTheme.colorCompoundBrandBackgroundHover,
colorCompoundBrandBackgroundPressed: palette.themeDark || webLightTheme.colorCompoundBrandBackgroundPressed,
colorBrandBackgroundStatic: palette.themePrimary || webLightTheme.colorBrandBackgroundStatic,
colorBrandBackground2: palette.themeLighterAlt || webLightTheme.colorBrandBackground2,
colorBrandBackgroundInverted: palette.white || webLightTheme.colorBrandBackgroundInverted,
colorBrandBackgroundInvertedHover: palette.themeLighterAlt || webLightTheme.colorBrandBackgroundInvertedHover,
colorBrandBackgroundInvertedPressed: palette.themeLight || webLightTheme.colorBrandBackgroundInvertedPressed,
colorBrandBackgroundInvertedSelected: palette.themeLighter || webLightTheme.colorBrandBackgroundInvertedSelected,
colorNeutralStrokeAccessible: palette.neutralSecondary || webLightTheme.colorNeutralStrokeAccessible,
colorNeutralStrokeAccessibleHover: palette.neutralSecondary || webLightTheme.colorNeutralStrokeAccessibleHover,
colorNeutralStrokeAccessiblePressed: palette.neutralSecondary || webLightTheme.colorNeutralStrokeAccessiblePressed,
colorNeutralStrokeAccessibleSelected: palette.themePrimary || webLightTheme.colorNeutralStrokeAccessibleSelected,
colorNeutralStroke1: palette.neutralQuaternary || webLightTheme.colorNeutralStroke1,
colorNeutralStroke1Hover: palette.neutralTertiaryAlt || webLightTheme.colorNeutralStroke1Hover,
colorNeutralStroke1Pressed: palette.neutralTertiaryAlt || webLightTheme.colorNeutralStroke1Pressed,
colorNeutralStroke1Selected: palette.neutralTertiaryAlt || webLightTheme.colorNeutralStroke1Selected,
colorNeutralStroke2: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralStroke2,
colorNeutralStroke3: palette.neutralLighter || webLightTheme.colorNeutralStroke3,
colorNeutralStrokeOnBrand: palette.white || webLightTheme.colorNeutralStrokeOnBrand,
colorNeutralStrokeOnBrand2: palette.white || webLightTheme.colorNeutralStrokeOnBrand2,
colorNeutralStrokeOnBrand2Hover: palette.white || webLightTheme.colorNeutralStrokeOnBrand2Hover,
colorNeutralStrokeOnBrand2Pressed: palette.white || webLightTheme.colorNeutralStrokeOnBrand2Pressed,
colorNeutralStrokeOnBrand2Selected: palette.white || webLightTheme.colorNeutralStrokeOnBrand2Selected,
colorBrandStroke1: palette.themePrimary || webLightTheme.colorBrandStroke1,
colorBrandStroke2: palette.themeLight || webLightTheme.colorBrandStroke2,
colorCompoundBrandStroke: palette.themePrimary || webLightTheme.colorCompoundBrandStroke,
colorCompoundBrandStrokeHover: palette.themeDarkAlt || webLightTheme.colorCompoundBrandStrokeHover,
colorCompoundBrandStrokePressed: palette.themeDark || webLightTheme.colorCompoundBrandStrokePressed,
colorNeutralStrokeDisabled: palette.neutralQuaternaryAlt || webLightTheme.colorNeutralStrokeDisabled,
colorNeutralStrokeInvertedDisabled: whiteAlpha[40],
colorTransparentStroke: 'transparent',
colorTransparentStrokeInteractive: 'transparent',
colorTransparentStrokeDisabled: 'transparent',
colorStrokeFocus1: palette.white || webLightTheme.colorStrokeFocus1,
colorStrokeFocus2: palette.black || webLightTheme.colorStrokeFocus2,
colorNeutralShadowAmbient: 'rgba(0,0,0,0.12)',
colorNeutralShadowKey: 'rgba(0,0,0,0.14)',
colorNeutralShadowAmbientLighter: 'rgba(0,0,0,0.06)',
colorNeutralShadowKeyLighter: 'rgba(0,0,0,0.07)',
colorNeutralShadowAmbientDarker: 'rgba(0,0,0,0.20)',
colorNeutralShadowKeyDarker: 'rgba(0,0,0,0.24)',
colorBrandShadowAmbient: 'rgba(0,0,0,0.30)',
colorBrandShadowKey: 'rgba(0,0,0,0.25)',
colorNeutralStencil1Alpha: webLightTheme.colorNeutralStencil1Alpha,
colorNeutralStencil2Alpha: webLightTheme.colorNeutralStencil2Alpha,
};
};
/**
* Creates a v9 theme from a v8 theme.
* You can optional pass a base v9 theme; otherwise webLightTheme is used.
*/
export const createv9Theme = (themeV8: ThemeV8, baseThemeV9?: ThemeV9): ThemeV9 => {
const baseTheme = baseThemeV9 ?? webLightTheme;
return {
...baseTheme,
...mapAliasColors(themeV8.palette, themeV8.isInverted)
};
};

4
samples/react-group-membership-manager/src/webparts/groupMembershipManager/GroupMembershipManagerWebPart.ts
View File

@ -6,7 +6,7 @@ import { IReadonlyTheme } from '@microsoft/sp-component-base';
import GroupMembershipManager from './components/GroupMembershipManager';
import { IGroupMembershipManagerProps } from './components/IGroupMembershipManagerProps';
import { FluentProvider, FluentProviderProps, teamsDarkTheme, teamsLightTheme, webLightTheme, webDarkTheme, Theme } from '@fluentui/react-components';
import { createv9Theme } from '../../shims/v9ThemeShim';
import { createV9Theme } from '@fluentui/react-migration-v8-v9';
export enum AppMode {
SharePoint, Teams, Office, Outlook
@ -61,7 +61,7 @@ export default class GroupMembershipManagerWebPart extends BaseClientSideWebPart
this._isDarkTheme = !!currentTheme.isInverted;
//if the app mode is sharepoint, adjust the fluent ui 9 web light theme to use the sharepoint theme color, teams/dark mode should be fine on default
if (this._appMode === AppMode.SharePoint) {
this._theme = createv9Theme(currentTheme, webLightTheme);
this._theme = createV9Theme(currentTheme as undefined, webLightTheme);
}
}

3
samples/react-group-membership-manager/src/webparts/groupMembershipManager/components/GroupMembershipManager.tsx
View File

@ -4,8 +4,7 @@ import { IGroupMembershipManagerProps } from './IGroupMembershipManagerProps';
import * as strings from 'GroupMembershipManagerWebPartStrings';
import { MSGraphClientV3 } from '@microsoft/sp-http';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import { Spinner, Subtitle1, Textarea, Tooltip } from '@fluentui/react-components';
import { Dropdown, Option, Toolbar } from "@fluentui/react-components/unstable";
import { Spinner, Subtitle1, Textarea, Tooltip, Dropdown, Option, Toolbar } from '@fluentui/react-components';
import AddUser, { AddUserMode } from './AddUser';
import RemoveUser from './DeleteUser';
import { GraphError } from '@microsoft/microsoft-graph-clientv1';

2
samples/react-group-membership-manager/src/webparts/groupMembershipManager/components/Table.tsx
View File

@ -1,4 +1,4 @@
import { TableColumnDefinition, createTableColumn, TableRowId, useTableFeatures, useTableSelection, TableHeader, TableRow, Table, TableSelectionCell, TableHeaderCell, TableBody, TableCell, TableCellLayout } from "@fluentui/react-components/unstable";
import { TableColumnDefinition, createTableColumn, TableRowId, useTableFeatures, useTableSelection, TableHeader, TableRow, Table, TableSelectionCell, TableHeaderCell, TableBody, TableCell, TableCellLayout } from "@fluentui/react-components";
import * as React from 'react';
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import SPFxPeopleCard from "./SPFxPeopleCard";