@microsoft/generator-sharepoint 1.13.1 → 1.14.0

package/lib/generators/webpart/templates/react/components/{componentName}.tsx

@@ -5,21 +5,39 @@ import { escape } from '@microsoft/sp-lodash-subset';
 
 export default class <%= componentName %> extends React.Component<I<%= componentName %>Props, {}> {
   public render(): React.ReactElement<I<%= componentName %>Props> {
+    const {
+      description,
+      isDarkTheme,
+      environmentMessage,
+      hasTeamsContext,
+      userDisplayName
+    } = this.props;
+
     return (
-      <div className={ styles.<%= componentNameCamelCase %> }>
-        <div className={ styles.container }>
-          <div className={ styles.row }>
-            <div className={ styles.column }>
-              <span className={ styles.title }>Welcome to SharePoint!</span>
-              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
-              <p className={ styles.description }>{escape(this.props.description)}</p>
-              <a href="https://aka.ms/spfx" className={ styles.button }>
-                <span className={ styles.label }>Learn more</span>
-              </a>
-            </div>
-          </div>
+      <section className={`${styles.<%= componentNameCamelCase %>} ${hasTeamsContext ? styles.teams : ''}`}>
+        <div className={styles.welcome}>
+          <img alt="" src={isDarkTheme ? require('../assets/welcome-dark.png') : require('../assets/welcome-light.png')} className={styles.welcomeImage} />
+          <h2>Well done, {escape(userDisplayName)}!</h2>
+          <div>{environmentMessage}</div>
+          <div>Web part property value: <strong>{escape(description)}</strong></div>
+        </div>
+        <div>
+          <h3>Welcome to SharePoint Framework!</h3>
+          <p>
+            The SharePoint Framework (SPFx) is a extensibility model for Microsoft Viva, Microsoft Teams and SharePoint. It's the easiest way to extend Microsoft 365 with automatic Single Sign On, automatic hosting and industry standard tooling.
+          </p>
+          <h4>Learn more about SPFx development:</h4>
+          <ul className={styles.links}>
+            <li><a href="https://aka.ms/spfx" target="_blank">SharePoint Framework Overview</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-graph" target="_blank">Use Microsoft Graph in your solution</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-teams" target="_blank">Build for Microsoft Teams using SharePoint Framework</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-viva" target="_blank">Build for Microsoft Viva Connections using SharePoint Framework</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-store" target="_blank">Publish SharePoint Framework applications to the marketplace</a></li>
+            <li><a href="https://aka.ms/spfx-yeoman-api" target="_blank">SharePoint Framework API reference</a></li>
+            <li><a href="https://aka.ms/m365pnp" target="_blank">Microsoft 365 Developer Community</a></li>
+          </ul>
         </div>
-      </div>
+      </section>
     );
   }
 }

package/lib/generators/webpart/templates/react/{componentClassName}.ts

@@ -6,6 +6,7 @@ import {
   PropertyPaneTextField
 } from '@microsoft/sp-property-pane';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 
 import * as strings from '<%= componentStrings %>';
 import <%= componentName %> from './components/<%= componentName %>';
@@ -17,17 +18,53 @@ export interface I<%= componentClassName %>Props {
 
 export default class <%= componentClassName %> extends BaseClientSideWebPart<I<%= componentClassName %>Props> {
 
+  private _isDarkTheme: boolean = false;
+  private _environmentMessage: string = '';
+
+  protected onInit(): Promise<void> {
+    this._environmentMessage = this._getEnvironmentMessage();
+
+    return super.onInit();
+  }
+
   public render(): void {
     const element: React.ReactElement<I<%= componentName %>Props> = React.createElement(
       <%= componentName %>,
       {
-        description: this.properties.description
+        description: this.properties.description,
+        isDarkTheme: this._isDarkTheme,
+        environmentMessage: this._environmentMessage,
+        hasTeamsContext: !!this.context.sdks.microsoftTeams,
+        userDisplayName: this.context.pageContext.user.displayName
       }
     );
 
     ReactDom.render(element, this.domElement);
   }
 
+  private _getEnvironmentMessage(): string {
+    if (!!this.context.sdks.microsoftTeams) { // running in Teams
+      return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
+    }
+
+    return this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment;
+  }
+
+  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
+    if (!currentTheme) {
+      return;
+    }
+
+    this._isDarkTheme = !!currentTheme.isInverted;
+    const {
+      semanticColors
+    } = currentTheme;
+    this.domElement.style.setProperty('--bodyText', semanticColors.bodyText);
+    this.domElement.style.setProperty('--link', semanticColors.link);
+    this.domElement.style.setProperty('--linkHovered', semanticColors.linkHovered);
+
+  }
+
   protected onDispose(): void {
     ReactDom.unmountComponentAtNode(this.domElement);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/generator-sharepoint",
-  "version": "1.13.1",
+  "version": "1.14.0",
   "description": "Yeoman generator for the SharePoint Framework",
   "scripts": {},
   "engines": {
@@ -13,8 +13,8 @@
   "homepage": "http://aka.ms/spfx",
   "main": "lib/generators/app/index.js",
   "dependencies": {
-    "@microsoft/spfx-heft-plugins": "1.13.1",
-    "@rushstack/node-core-library": "3.40.0",
+    "@microsoft/spfx-heft-plugins": "1.14.0",
+    "@rushstack/node-core-library": "3.45.0",
     "colors": "~1.2.1",
     "lodash": "4.17.21",
     "update-notifier": "5.1.0",

package/lib/generators/solution/templates/base/.vscode/extensions.json

@@ -1,5 +0,0 @@
-{
-  "recommendations": [
-    "msjsdiag.debugger-for-chrome"
-  ]
-}

package/lib/generators/webpart/templates/base/loc/en-us.js

@@ -1,7 +0,0 @@
-define([], function() {
-  return {
-    "PropertyPaneDescription": "Description",
-    "BasicGroupName": "Group Name",
-    "DescriptionFieldLabel": "Description Field"
-  }
-});

package/lib/generators/webpart/templates/officeAddin/initial.outlookManifest.xml

@@ -1,91 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
-<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" 
-  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
-  xmlns:bt="http://schemas.microsoft.com/office/officeappbasictypes/1.0" 
-  xmlns:mailappor="http://schemas.microsoft.com/office/mailappversionoverrides/1.0" 
-  xsi:type="MailApp">
-  <Id><%= componentId %></Id>
-  <Version>1.0.0.0</Version>
-  <ProviderName>SPFx Provider</ProviderName>
-  <DefaultLocale>en-US</DefaultLocale>
-  <DisplayName DefaultValue="SPFx template"/>
-  <Description DefaultValue="A template to get started with a SPFx Outlook addin."/>
-  <IconUrl DefaultValue="https://cdn.graph.office.net/prod/media/shared/addin-icon.png"/>
-  <HighResolutionIconUrl DefaultValue="https://cdn.graph.office.net/prod/media/shared/addin-icon.png"/>
-  <SupportUrl DefaultValue="https://localhost:4321/help"/>
-  <AppDomains>
-    <AppDomain>https://login.microsoftonline.com</AppDomain>
-    <AppDomain>https://login.windows.net</AppDomain>
-  </AppDomains>
-  <Hosts>
-    <Host Name="Mailbox" />
-  </Hosts>
-  <Requirements>
-    <Sets>
-      <Set Name="Mailbox" MinVersion="1.4" />
-	  <Set Name="SharePointHostedAddin" MinVersion="1.1" />
-    </Sets>
-  </Requirements>
-  <FormSettings>
-    <Form xsi:type="ItemRead">
-      <DesktopSettings>
-        <SourceLocation DefaultValue="https://_SharePointTenantUrl_/_layouts/15/outlookhostedapp.aspx?componentId=<%= componentId %>&amp;isConfigureMode=true"/>
-        <RequestedHeight>250</RequestedHeight>
-      </DesktopSettings>
-    </Form>
-  </FormSettings>
-  <Permissions>ReadWriteMailbox</Permissions>
-  <Rule xsi:type="RuleCollection" Mode="Or">
-    <Rule xsi:type="ItemIs" ItemType="Message" FormType="Read" />
-  </Rule>
-  <DisableEntityHighlighting>false</DisableEntityHighlighting>
-  <VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides" xsi:type="VersionOverridesV1_0">
-  	<VersionOverrides xmlns="http://schemas.microsoft.com/office/mailappversionoverrides/1.1" xsi:type="VersionOverridesV1_1">
-      <Hosts>
-        <Host xsi:type="MailHost">
-          <DesktopFormFactor>
-            <ExtensionPoint xsi:type="MessageReadCommandSurface">
-              <OfficeTab id="TabDefault">
-                <Group id="msgReadGroup">
-                  <Label resid="GroupLabel" />
-                  <Control xsi:type="Button" id="msgReadOpenPaneButton">
-                    <Label resid="TaskpaneButton.Label" />
-                    <Supertip>
-                      <Title resid="TaskpaneButton.Label" />
-                      <Description resid="TaskpaneButton.Tooltip" />
-                    </Supertip>
-                    <Icon>
-                      <bt:Image size="16" resid="Icon.16x16" />
-                      <bt:Image size="32" resid="Icon.32x32" />
-                      <bt:Image size="80" resid="Icon.80x80" />
-                    </Icon>
-                    <Action xsi:type="ShowTaskpane">
-                      <SourceLocation resid="Taskpane.Url" />
-                    </Action>
-                  </Control>
-                </Group>
-              </OfficeTab>
-            </ExtensionPoint>
-          </DesktopFormFactor>
-        </Host>
-      </Hosts>
-      <Resources>
-        <bt:Images>
-          <bt:Image id="Icon.16x16" DefaultValue="https://cdn.graph.office.net/prod/media/shared/addin-icon.png"/>
-          <bt:Image id="Icon.32x32" DefaultValue="https://cdn.graph.office.net/prod/media/shared/addin-icon.png"/>
-          <bt:Image id="Icon.80x80" DefaultValue="https://cdn.graph.office.net/prod/media/shared/addin-icon.png"/>
-        </bt:Images>
-        <bt:Urls>
-          <bt:Url id="Taskpane.Url" DefaultValue="https://_SharePointTenantUrl_/_layouts/15/outlookhostedapp.aspx?componentId=<%= componentId %>&amp;isConfigureMode=true" />
-        </bt:Urls>
-        <bt:ShortStrings>
-          <bt:String id="GroupLabel" DefaultValue="Add-in groupLabel"/>
-          <bt:String id="TaskpaneButton.Label" DefaultValue="Show Taskpane"/>
-        </bt:ShortStrings>
-        <bt:LongStrings>
-          <bt:String id="TaskpaneButton.Tooltip" DefaultValue="Opens taskpane."/>
-        </bt:LongStrings>
-      </Resources>
-    </VersionOverrides>
-  </VersionOverrides>
-</OfficeApp>