sample: Adding the hero app with current version of MGT (#2525)

Adds react-contoso sample app
Removes the previous admin-app
Fixed to supported features
Adding workspace + spinner
Adding the DirectReports GET component
Adding the taxonomy explorer
Updated docs and scss to be taxonomy-picker specific

---------

Co-authored-by: Gavin Barron <[email protected]>

Author: sebastienlevert

lerna.json

@@ -2,7 +2,7 @@
   "packages": [
     "packages/*",
     "packages/providers/*",
-    "samples/react-admin-app",
+    "samples/react-contoso",
     "samples/react-app",
     "samples/angular-app",
     "samples/vue-app",

package.json

@@ -6,7 +6,7 @@
     "packages": [
       "packages/*",
       "packages/providers/*",
-      "samples/react-admin-app",
+      "samples/react-contoso",
       "samples/react-app",
       "samples/angular-app",
       "samples/vue-app",
@@ -34,6 +34,7 @@
     "build:mgt-spfx": "lerna run build --scope @microsoft/mgt-spfx",
     "build:sp-webpart": "lerna run build --scope mgt-demo",
     "build:sp-mgt": "lerna run build --scope sp-mgt-no-framework",
+    "build:react-contoso": "lerna run build --scope react-contoso",
     "package:sp-webpart": "lerna run package --scope mgt-demo",
     "package:sp-mgt": "lerna run package --scope sp-mgt-no-framework",
     "bundle": "cd ./packages/mgt && npm run bundle",
@@ -53,8 +54,8 @@
     "watch:serve": "npm-run-all --parallel watch serve",
     "watch:serve:https": "npm-run-all -parallel watch serve:https",
     "watch:components": "lerna run --parallel build:watch --scope @microsoft/mgt-components --include-dependents",
-    "watch:react-admin-app": "lerna run start --scope react-admin-app",
-    "watch:react": "npm-run-all --parallel watch:components watch:react-admin-app",
+    "watch:react-contoso": "lerna run start --scope react-contoso",
+    "watch:react": "npm-run-all --parallel watch:components watch:react-contoso",
     "prettier:base": "prettier --parser typescript",
     "prettier:check": "npm run prettier:base -- --check \"packages/**/*.{ts,tsx}\"",
     "prettier:write": "npm run prettier:base -- --write \"packages/**/*.{ts,tsx}\"",

packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.scss

@@ -0,0 +1,26 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
+@import '../../styles/shared-styles';
+@import './mgt-taxonomy-picker.theme';
+
+:host {
+  --max-height: var(--taxonomy-picker-max-height, 380px);
+
+  font-family: $font-family;
+
+  .picker {
+    background-color: $taxonomy-picker-background-color;
+  }
+}
+
+[dir='rtl'] {
+  .picker {
+    direction: rtl;
+  }
+}

packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.theme.scss

@@ -0,0 +1,10 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../styles/shared-sass-variables';
+
+$taxonomy-picker-background-color: var(--taxonomy-picker-background-color, transparent);

packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts

@@ -14,6 +14,7 @@ import { strings } from './strings';
 import { fluentCombobox, fluentOption } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import '../../styles/style-helper';
+import { styles } from './mgt-taxonomy-picker-css';
 import { DataChangedDetail } from '../mgt-get/mgt-get';
 
 registerFluentComponents(fluentCombobox, fluentOption);
@@ -29,6 +30,9 @@ registerFluentComponents(fluentCombobox, fluentOption);
  * @export
  * @class MgtTaxonomyPicker
  * @extends {MgtTemplatedComponent}
+ *
+ * @cssprop --taxonomy-picker-background-color - {Color} Picker component background color
+ * @cssprop --taxonomy-picker-list-max-height - {String} max height for options list. Default value is 380px.
  */
 @customElement('taxonomy-picker')
 export class MgtTaxonomyPicker extends MgtTemplatedComponent {
@@ -43,6 +47,10 @@ export class MgtTaxonomyPicker extends MgtTemplatedComponent {
     return strings;
   }
 
+  public static get styles() {
+    return styles;
+  }
+
   /**
    * The termsetId of the term set whose children to get.
    *

packages/mgt-react/scripts/generate.js

@@ -21,7 +21,8 @@ const gaTags = new Set([
   'taxonomy-picker',
   'theme-toggle',
   'search-box',
-  'search-results'
+  'search-results',
+  'spinner'
 ]);
 const outputFileName = 'react';
 

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

@@ -237,6 +237,10 @@ export type SearchResultsProps = {
 	templateRendered?: (e: CustomEvent<TemplateRenderedData>) => void;
 }
 
+export type SpinnerProps = {
+	mediaQuery?: ComponentMediaQuery;
+}
+
 export type TasksProps = {
 	res?: TasksStringResource;
 	isNewTaskVisible?: boolean;
@@ -328,6 +332,8 @@ export const SearchBox = wrapMgt<SearchBoxProps>('search-box');
 
 export const SearchResults = wrapMgt<SearchResultsProps>('search-results');
 
+export const Spinner = wrapMgt<SpinnerProps>('spinner');
+
 export const Tasks = wrapMgt<TasksProps>('tasks');
 
 export const TaxonomyPicker = wrapMgt<TaxonomyPickerProps>('taxonomy-picker');