Refresh content for FY26Q4

Demos/01-appcatalog/README.md

@@ -4,7 +4,7 @@ This completed project is the result of the lab exercise **Create and Configure
 
 ## Prerequisites
 
-- [Microsoft 365 tenant](https://developer.microsoft.com/en-us/microsoft-365/dev-program?ocid=MSlearn)
+- [Microsoft 365 tenant](https://developer.microsoft.com/microsoft-365/dev-program?ocid=MSlearn)
 
 ## Instructions
 

Demos/02-setup-env/README.md

@@ -4,7 +4,7 @@ This completed project is the result of the lab exercise **Configure your ShareP
 
 ## Prerequisites
 
-- [Microsoft 365 tenant](https://developer.microsoft.com/en-us/microsoft-365/dev-program?ocid=MSlearn)
+- [Microsoft 365 tenant](https://developer.microsoft.com/microsoft-365/dev-program?ocid=MSlearn)
 - [Visual Studio Code](https://code.visualstudio.com/)
 
 ## Instructions

Demos/03-webpart/.gitignore

@@ -9,6 +9,10 @@ node_modules
 # Build generated files
 dist
 lib
+lib-dts
+lib-commonjs
+lib-esm
+jest-output
 release
 solution
 temp

Demos/03-webpart/.npmignore

@@ -1,16 +1,22 @@
-!dist
-config
+# Ignore everything by default
+**
 
-gulpfile.js
+# Use negative patterns to bring back the specific things we want to publish
+!/bin/**
+!/dist/**
+!/EULA/**
+!/lib/**
+!ThirdPartyNotice.txt
 
-release
-src
-temp
+# Ignore certain files in the above folders
+/dist/*.stats.*
+/dist/**/*.js.map
+/lib/**/*.js.map
+/lib/**/test/**
 
-tsconfig.json
-tslint.json
-
-*.log
-
-.yo-rc.json
-.vscode
+# NOTE: These don't need to be specified, because NPM includes them automatically.
+#
+# package.json
+# README (and its variants)
+# CHANGELOG (and its variants)
+# LICENSE / LICENCE

Demos/03-webpart/.yo-rc.json

@@ -1,15 +1,13 @@
 {
   "@microsoft/generator-sharepoint": {
+    "useGulp": false,
     "plusBeta": false,
     "isCreatingSolution": true,
-    "nodeVersion": "18.20.4",
-    "sdksVersions": {
-      "@microsoft/microsoft-graph-client": "3.0.2",
-      "@microsoft/teams-js": "2.24.0"
-    },
-    "version": "1.20.0",
+    "nodeVersion": "22.15.0",
+    "sdksVersions": {},
+    "version": "1.23.0",
     "libraryName": "hello-world",
-    "libraryId": "58d1a1d0-097b-4d7f-8d8d-b4de9f45c2bf",
+    "libraryId": "bc092361-0ea2-42f1-b439-d362bcbd5301",
     "environment": "spo",
     "packageManager": "npm",
     "solutionName": "hello-world",

Demos/03-webpart/README.md

@@ -8,12 +8,12 @@ Short summary on functionality and used technologies.
 
 ## Used SharePoint Framework Version
 
-![version](https://img.shields.io/badge/version-1.20.0-green.svg)
+![version](https://img.shields.io/badge/version-1.23.0-green.svg)
 
 ## Applies to
 
 - [SharePoint Framework](https://aka.ms/spfx)
-- [Microsoft 365 tenant](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Microsoft 365 tenant](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
 
 > Get your own free development tenant by subscribing to [Microsoft 365 developer program](http://aka.ms/o365devprogram)
 
@@ -45,11 +45,14 @@ Short summary on functionality and used technologies.
 - Clone this repository
 - Ensure that you are at the solution folder
 - in the command-line run:
-  - **npm install**
-  - **gulp serve**
+  - `npm install -g @rushstack/heft`
+  - `npm install`
+  - `heft start`
 
 > Include any additional steps as needed.
 
+Other build commands can be listed using `heft --help`.
+
 ## Features
 
 Description of the extension that expands upon high-level summary above.
@@ -66,8 +69,9 @@ This extension illustrates the following concepts:
 
 ## References
 
-- [Getting started with SharePoint Framework](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant)
-- [Building for Microsoft teams](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/build-for-teams-overview)
-- [Use Microsoft Graph in your solution](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
-- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/publish-to-marketplace-overview)
+- [Getting started with SharePoint Framework](https://docs.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
+- [Building for Microsoft teams](https://docs.microsoft.com/sharepoint/dev/spfx/build-for-teams-overview)
+- [Use Microsoft Graph in your solution](https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/get-started/using-microsoft-graph-apis)
+- [Publish SharePoint Framework applications to the Marketplace](https://docs.microsoft.com/sharepoint/dev/spfx/publish-to-marketplace-overview)
 - [Microsoft 365 Patterns and Practices](https://aka.ms/m365pnp) - Guidance, tooling, samples and open-source controls for your Microsoft 365 development
+- [Heft Documentation](https://heft.rushstack.io/)

Demos/03-webpart/config/deploy-azure-storage.json

@@ -4,4 +4,4 @@
   "account": "<!-- STORAGE ACCOUNT NAME -->",
   "container": "hello-world",
   "accessKey": "<!-- ACCESS KEY -->"
-}
+}

Demos/03-webpart/config/package-solution.json

@@ -2,7 +2,7 @@
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "hello-world-client-side-solution",
-    "id": "58d1a1d0-097b-4d7f-8d8d-b4de9f45c2bf",
+    "id": "bc092361-0ea2-42f1-b439-d362bcbd5301",
     "version": "1.0.0.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
@@ -12,7 +12,7 @@
       "websiteUrl": "",
       "privacyUrl": "",
       "termsOfUseUrl": "",
-      "mpnId": "Undefined-1.20.0"
+      "mpnId": "Undefined-1.23.0"
     },
     "metadata": {
       "shortDescription": {
@@ -29,7 +29,7 @@
       {
         "title": "hello-world Feature",
         "description": "The feature that activates elements of the hello-world solution.",
-        "id": "b7da0188-127d-4b48-af45-e743ca28383f",
+        "id": "8a2d192f-9cb0-4644-9098-4cea320dafec",
         "version": "1.0.0.0"
       }
     ]

Demos/03-webpart/config/rig.json

@@ -0,0 +1,7 @@
+{
+  // The "rig.json" file directs tools to look for their config files in an external package.
+  // Documentation for this system: https://www.npmjs.com/package/@rushstack/rig-package
+  "$schema": "https://developer.microsoft.com/json-schemas/rig-package/rig.schema.json",
+
+  "rigPackageName": "@microsoft/spfx-web-build-rig"
+}

Demos/03-webpart/config/sass.json

@@ -1,3 +1,5 @@
 {
-  "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+  "$schema": "https://developer.microsoft.com/json-schemas/heft/v0/heft-sass-plugin.schema.json",
+
+  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/sass.json"
 }

Demos/03-webpart/config/typescript.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@microsoft/spfx-web-build-rig/profiles/default/config/typescript.json",
+
+  "staticAssetsToCopy": {
+    "fileExtensions": [".resx", ".jpg", ".png", ".woff", ".eot", ".ttf", ".svg", ".gif"],
+
+    "includeGlobs": ["webparts/*/loc/*.js"]
+  }
+}

Demos/03-webpart/eslint.config.js

@@ -0,0 +1,14 @@
+const spfxProfile = require('@microsoft/eslint-config-spfx/lib/flat-profiles/react');
+
+module.exports = [
+  ...spfxProfile,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: './tsconfig.json'
+      }
+    }
+  }
+];

Demos/03-webpart/package.json

@@ -3,35 +3,46 @@
   "version": "0.0.1",
   "private": true,
   "engines": {
-    "node": ">=18.17.1 <19.0.0"
+    "node": ">=22.14.0 < 23.0.0"
   },
-  "main": "lib/index.js",
   "scripts": {
-    "build": "gulp bundle",
-    "clean": "gulp clean",
-    "test": "gulp test"
+    "build": "heft test --clean --production && heft package-solution --production",
+    "clean": "heft clean",
+    "eject-webpack": "heft eject-webpack",
+    "start": "heft start --clean"
   },
   "dependencies": {
     "tslib": "2.3.1",
-    "@microsoft/sp-core-library": "1.20.0",
-    "@microsoft/sp-component-base": "1.20.0",
-    "@microsoft/sp-property-pane": "1.20.0",
-    "@microsoft/sp-webpart-base": "1.20.0",
-    "@microsoft/sp-lodash-subset": "1.20.0",
-    "@microsoft/sp-office-ui-fabric-core": "1.20.0"
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
+    "@fluentui/react": "^8.106.4",
+    "@microsoft/sp-core-library": "1.23.0",
+    "@microsoft/sp-component-base": "1.23.0",
+    "@microsoft/sp-property-pane": "1.23.0",
+    "@microsoft/sp-webpart-base": "1.23.0",
+    "@microsoft/sp-lodash-subset": "1.23.0",
+    "@microsoft/sp-office-ui-fabric-core": "1.23.0"
   },
   "devDependencies": {
-    "@microsoft/rush-stack-compiler-4.7": "0.1.0",
-    "@rushstack/eslint-config": "4.0.1",
-    "@microsoft/eslint-plugin-spfx": "1.20.2",
-    "@microsoft/eslint-config-spfx": "1.20.2",
-    "@microsoft/sp-build-web": "1.20.2",
+    "@microsoft/eslint-plugin-spfx": "1.23.0",
+    "@microsoft/eslint-config-spfx": "1.23.0",
+    "@microsoft/spfx-web-build-rig": "1.23.0",
+    "@microsoft/spfx-heft-plugins": "1.23.0",
+    "@rushstack/heft": "1.2.17",
+    "@types/jest": "30.0.0",
     "@types/webpack-env": "~1.15.2",
-    "ajv": "^6.12.5",
-    "eslint": "8.57.0",
-    "gulp": "4.0.2",
-    "typescript": "4.7.4",
-    "@microsoft/sp-module-interfaces": "1.20.2",
-    "@fluentui/react": "^8.106.4"
+    "css-loader": "~7.1.2",
+    "eslint": "9.37.0",
+    "typescript": "~5.8.0",
+    "@types/react": "17.0.45",
+    "@types/react-dom": "17.0.17",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "@microsoft/sp-module-interfaces": "1.23.0"
+  },
+  "overrides": {
+    "@rushstack/heft": "1.2.17"
+  },
+  "resolutions": {
+    "@types/react": "17.0.45"
   }
 }

Demos/03-webpart/src/webparts/helloWorld/HelloWorldWebPart.manifest.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
-  "id": "4f305338-fac1-4515-b720-5d606f2b5d45",
+  "id": "c2383027-3a06-4fcd-9917-44654da9f78c",
   "alias": "HelloWorldWebPart",
   "componentType": "WebPart",
 

Demos/03-webpart/src/webparts/helloWorld/HelloWorldWebPart.ts

@@ -1,14 +1,16 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
 import { Version } from '@microsoft/sp-core-library';
 import {
   type IPropertyPaneConfiguration,
   PropertyPaneTextField
 } from '@microsoft/sp-property-pane';
 import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
-import type { IReadonlyTheme } from '@microsoft/sp-component-base';
-import { escape } from '@microsoft/sp-lodash-subset';
+import { IReadonlyTheme } from '@microsoft/sp-component-base';
 
-import styles from './HelloWorldWebPart.module.scss';
 import * as strings from 'HelloWorldWebPartStrings';
+import HelloWorld from './components/HelloWorld';
+import { IHelloWorldProps } from './components/IHelloWorldProps';
 
 export interface IHelloWorldWebPartProps {
   description: string;
@@ -20,31 +22,18 @@ export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorld
   private _environmentMessage: string = '';
 
   public render(): void {
-    this.domElement.innerHTML = `
-    <section class="${styles.helloWorld} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
-      <div class="${styles.welcome}">
-        <img alt="" src="${this._isDarkTheme ? require('./assets/welcome-dark.png') : require('./assets/welcome-light.png')}" class="${styles.welcomeImage}" />
-        <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
-        <div>${this._environmentMessage}</div>
-        <div>Web part property value: <strong>${escape(this.properties.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 class="${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>
-    </section>`;
+    const element: React.ReactElement<IHelloWorldProps> = React.createElement(
+      HelloWorld,
+      {
+        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);
   }
 
   protected onInit(): Promise<void> {
@@ -100,6 +89,10 @@ export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorld
 
   }
 
+  protected onDispose(): void {
+    ReactDom.unmountComponentAtNode(this.domElement);
+  }
+
   protected get dataVersion(): Version {
     return Version.parse('1.0');
   }

Demos/03-webpart/src/webparts/helloWorld/HelloWorldWebPart.module.scss → Demos/03-webpart/src/webparts/helloWorld/components/HelloWorld.module.scss

@@ -1,4 +1,4 @@
-@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
+@import 'pkg:@fluentui/react/dist/sass/References.scss';
 
 .helloWorld {
   overflow: hidden;