Merge branch 'microsoft:master' into master

.devops/templates/tools.yml

@@ -38,3 +38,9 @@ steps:
       echo number of CPUs "$(getconf _NPROCESSORS_ONLN)"
     displayName: Log environment variables (Linux)
     condition: eq(variables['Agent.OS'], 'Linux')
+
+  # Logs a message when dry run mode is enabled.
+  - script: |
+      echo "dry run mode enabled!"
+    displayName: dry run mode notification
+    condition: eq(variables.dryRun, true)

.devops/templates/variables.yml

@@ -43,3 +43,6 @@ variables:
     deployBasePath: ${{ coalesce(parameters.deployBasePath, replace(variables['Build.SourceBranch'], 'refs/', '')) }}
 
   skipComponentGovernanceDetection: ${{ parameters.skipComponentGovernanceDetection }}
+
+  # Dry run mode for testing the pipeline without making changes
+  dryRun: false

.github/CODEOWNERS

@@ -121,6 +121,7 @@ apps/ts-minbar-test-react @microsoft/fluentui-react-build
 apps/ts-minbar-test-react-components @microsoft/fluentui-react-build
 apps/vr-tests @microsoft/fluentui-react
 apps/vr-tests-react-components @microsoft/fluentui-react
+apps/vr-tests-react-components/src/stories/Charts @microsoft/charting-team
 apps/vr-tests-web-components @microsoft/fui-wc
 apps/ssr-tests @microsoft/fluentui-react
 apps/pr-deploy-site @microsoft/fluentui-react-build
@@ -132,7 +133,7 @@ apps/react-18-tests-v9 @microsoft/fluentui-react-build
 apps/chart-docsite @microsoft/charting-team
 
 #### Packages
-packages/azure-themes @Jacqueline-ms @robtaft-ms
+packages/azure-themes @Jacqueline-ms
 packages/react-conformance @microsoft/fluentui-react-build
 packages/charts/chart-web-components @microsoft/charting-team
 packages/charts/react-charting @microsoft/charting-team
@@ -192,93 +193,64 @@ common/_common.scss @microsoft/cxe-red @phkuo
 
 ## vNext packages
 packages/react-components/keyboard-keys @microsoft/teams-prg
-packages/react-components/react-accordion @microsoft/cxe-prg
 packages/react-components/react-accordion/library @microsoft/cxe-prg
 packages/react-components/react-accordion/stories @microsoft/cxe-prg
-packages/react-components/react-avatar @microsoft/cxe-prg
 packages/react-components/react-avatar/library @microsoft/cxe-prg
 packages/react-components/react-avatar/stories @microsoft/cxe-prg
-packages/react-components/react-badge @microsoft/cxe-prg
 packages/react-components/react-badge/library @microsoft/cxe-prg
 packages/react-components/react-badge/stories @microsoft/cxe-prg
-packages/react-components/react-button @microsoft/cxe-red @khmakoto
 packages/react-components/react-button/library @microsoft/cxe-red @khmakoto
 packages/react-components/react-button/stories @microsoft/cxe-red @khmakoto
-packages/react-components/react-card @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-card/library @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-card/stories @microsoft/cxe-prg @marcosmoura
-packages/react-components/react-checkbox @microsoft/cxe-prg
 packages/react-components/react-checkbox/library @microsoft/cxe-prg
 packages/react-components/react-checkbox/stories @microsoft/cxe-prg
-packages/react-components/react-combobox @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-combobox/library @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-combobox/stories @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-components @microsoft/fluentui-react
-packages/react-components/react-dialog @microsoft/teams-prg
 packages/react-components/react-dialog/library @microsoft/teams-prg
 packages/react-components/react-dialog/stories @microsoft/teams-prg
-packages/react-components/react-divider @microsoft/cxe-prg
 packages/react-components/react-divider/library @microsoft/cxe-prg
 packages/react-components/react-divider/stories @microsoft/cxe-prg
-packages/react-components/react-field @microsoft/cxe-prg
 packages/react-components/react-field/library @microsoft/cxe-prg
 packages/react-components/react-field/stories @microsoft/cxe-prg
 packages/react-focus @microsoft/cxe-red @khmakoto
-packages/react-components/react-image @microsoft/cxe-prg
 packages/react-components/react-image/library @microsoft/cxe-prg
 packages/react-components/react-image/stories @microsoft/cxe-prg
-packages/react-components/react-input @microsoft/cxe-prg
 packages/react-components/react-input/library @microsoft/cxe-prg
 packages/react-components/react-input/stories @microsoft/cxe-prg
-packages/react-components/react-label @microsoft/cxe-prg
 packages/react-components/react-label/library @microsoft/cxe-prg
 packages/react-components/react-label/stories @microsoft/cxe-prg
-packages/react-components/react-link @microsoft/cxe-prg
 packages/react-components/react-link/library @microsoft/cxe-prg
 packages/react-components/react-link/stories @microsoft/cxe-prg
-packages/react-components/react-menu @microsoft/teams-prg
 packages/react-components/react-menu/library @microsoft/teams-prg
 packages/react-components/react-menu/stories @microsoft/teams-prg
-packages/react-components/react-popover @microsoft/teams-prg
 packages/react-components/react-popover/library @microsoft/teams-prg
 packages/react-components/react-popover/stories @microsoft/teams-prg
-packages/react-components/react-portal @microsoft/teams-prg
 packages/react-components/react-portal/library @microsoft/teams-prg
 packages/react-components/react-portal/stories @microsoft/teams-prg
-packages/react-components/react-provider @microsoft/teams-prg
 packages/react-components/react-provider/library @microsoft/teams-prg
 packages/react-components/react-provider/stories @microsoft/teams-prg
-packages/react-components/react-radio @microsoft/cxe-red @behowell @spmonahan
 packages/react-components/react-radio/library @microsoft/cxe-red @behowell @spmonahan
 packages/react-components/react-radio/stories @microsoft/cxe-red @behowell @spmonahan
-packages/react-components/react-select @microsoft/cxe-prg
 packages/react-components/react-select/library @microsoft/cxe-prg
 packages/react-components/react-select/stories @microsoft/cxe-prg
-packages/react-components/react-slider @microsoft/cxe-prg
 packages/react-components/react-slider/library @microsoft/cxe-prg
 packages/react-components/react-slider/stories @microsoft/cxe-prg
-packages/react-components/react-spinbutton @microsoft/cxe-prg
 packages/react-components/react-spinbutton/library @microsoft/cxe-prg
 packages/react-components/react-spinbutton/stories @microsoft/cxe-prg
-packages/react-components/react-spinner @microsoft/cxe-prg
 packages/react-components/react-spinner/library @microsoft/cxe-prg
 packages/react-components/react-spinner/stories @microsoft/cxe-prg
-packages/react-components/react-switch @microsoft/cxe-prg
 packages/react-components/react-switch/library @microsoft/cxe-prg
 packages/react-components/react-switch/stories @microsoft/cxe-prg
-packages/react-components/react-tabs @microsoft/cxe-prg @dmytrokirpa
 packages/react-components/react-tabs/library @microsoft/cxe-prg @dmytrokirpa
 packages/react-components/react-tabs/stories @microsoft/cxe-prg @dmytrokirpa
-packages/react-components/react-text @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-text/library @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-text/stories @microsoft/cxe-prg @marcosmoura
-packages/react-components/react-textarea @microsoft/cxe-prg
 packages/react-components/react-textarea/library @microsoft/cxe-prg
 packages/react-components/react-textarea/stories @microsoft/cxe-prg
-packages/react-components/react-tooltip @microsoft/cxe-prg
 packages/react-components/react-tooltip/library @microsoft/cxe-prg
 packages/react-components/react-tooltip/stories @microsoft/cxe-prg
-packages/react-components/react-toolbar @microsoft/teams-prg @chpalac @ling1726
 packages/react-components/react-toolbar/library @microsoft/teams-prg @chpalac @ling1726
 packages/react-components/react-toolbar/stories @microsoft/teams-prg @chpalac @ling1726
 packages/react-components/react-portal-compat @microsoft/teams-prg
@@ -287,88 +259,63 @@ packages/react-components/react-theme-sass @microsoft/teams-prg
 packages/react-components/theme-designer @microsoft/cxe-red @ms-acalzaretto
 packages/react-components/global-context @microsoft/teams-prg
 packages/react-components/babel-preset-global-context @microsoft/teams-prg
-packages/react-components/react-table @microsoft/teams-prg
 packages/react-components/react-table/library @microsoft/teams-prg
 packages/react-components/react-table/stories @microsoft/teams-prg
-packages/react-components/react-progress @microsoft/cxe-prg
 packages/react-components/react-progress/library @microsoft/cxe-prg
 packages/react-components/react-progress/stories @microsoft/cxe-prg
-packages/react-components/react-persona @microsoft/cxe-prg
 packages/react-components/react-persona/library @microsoft/cxe-prg
 packages/react-components/react-persona/stories @microsoft/cxe-prg
-packages/react-components/react-tree @microsoft/teams-prg
 packages/react-components/react-tree/library @microsoft/teams-prg
 packages/react-components/react-tree/stories @microsoft/teams-prg
-packages/react-components/react-virtualizer @microsoft/xc-uxe @Mitch-At-Work
 packages/react-components/react-virtualizer/library @microsoft/xc-uxe @Mitch-At-Work
 packages/react-components/react-virtualizer/stories @microsoft/xc-uxe @Mitch-At-Work
-packages/react-components/react-skeleton @microsoft/cxe-prg
 packages/react-components/react-skeleton/library @microsoft/cxe-prg
 packages/react-components/react-skeleton/stories @microsoft/cxe-prg
 packages/tokens @microsoft/teams-prg
-packages/react-components/react-tags @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-tags/library @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-tags/stories @microsoft/cxe-prg @microsoft/teams-prg
 packages/react-components/react-migration-v0-v9/library @microsoft/teams-prg
 packages/react-components/react-migration-v0-v9/stories @microsoft/teams-prg
-packages/react-components/react-datepicker-compat @microsoft/cxe-prg
 packages/react-components/react-datepicker-compat/library @microsoft/cxe-prg
 packages/react-components/react-datepicker-compat/stories @microsoft/cxe-prg
 packages/react-components/react-migration-v8-v9/library @microsoft/cxe-prg @geoffcoxmsft
 packages/react-components/react-migration-v8-v9/stories @microsoft/cxe-prg @geoffcoxmsft
-packages/react-components/react-breadcrumb @microsoft/cxe-prg
 packages/react-components/react-breadcrumb/library @microsoft/cxe-prg
 packages/react-components/react-breadcrumb/stories @microsoft/cxe-prg
-packages/react-components/react-drawer @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-drawer/library @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-drawer/stories @microsoft/cxe-prg @marcosmoura
 packages/react-components/react-storybook-addon-export-to-sandbox @microsoft/fluentui-react-build
 packages/react-components/babel-preset-storybook-full-source @microsoft/fluentui-react-build
 packages/react-components/react-jsx-runtime @microsoft/teams-prg
-packages/react-components/react-toast @microsoft/teams-prg
 packages/react-components/react-toast/library @microsoft/teams-prg
 packages/react-components/react-toast/stories @microsoft/teams-prg
-packages/react-components/react-search @microsoft/cxe-prg
 packages/react-components/react-search/library @microsoft/cxe-prg
 packages/react-components/react-search/stories @microsoft/cxe-prg
 packages/react-components/react-colorpicker-compat @microsoft/cxe-red @sopranopillow
-packages/react-components/react-nav-preview @microsoft/cxe-red @microsoft/xc-uxe @mltejera
 packages/react-components/react-nav-preview/library @microsoft/cxe-red @microsoft/xc-uxe @mltejera
 packages/react-components/react-nav-preview/stories @microsoft/cxe-red @microsoft/xc-uxe @mltejera
-packages/react-components/react-message-bar @microsoft/teams-prg
 packages/react-components/react-message-bar/library @microsoft/teams-prg
 packages/react-components/react-message-bar/stories @microsoft/teams-prg
-packages/react-components/react-rating @microsoft/cxe-prg
 packages/react-components/react-rating/library @microsoft/cxe-prg
 packages/react-components/react-rating/stories @microsoft/cxe-prg
-packages/react-components/react-swatch-picker @microsoft/cxe-prg
 packages/react-components/react-swatch-picker/library @microsoft/cxe-prg
 packages/react-components/react-swatch-picker/stories @microsoft/cxe-prg
-packages/react-components/react-calendar-compat @microsoft/cxe-prg
 packages/react-components/react-calendar-compat/library @microsoft/cxe-prg
 packages/react-components/react-calendar-compat/stories @microsoft/cxe-prg
-packages/react-components/react-infolabel @microsoft/cxe-prg
 packages/react-components/react-infolabel/library @microsoft/cxe-prg
 packages/react-components/react-infolabel/stories @microsoft/cxe-prg
-packages/react-components/react-list @microsoft/teams-prg
 packages/react-components/react-list/library @microsoft/teams-prg
 packages/react-components/react-list/stories @microsoft/teams-prg
-packages/react-components/react-motion @microsoft/teams-prg
 packages/react-components/react-motion/library @microsoft/teams-prg
 packages/react-components/react-motion/stories @microsoft/teams-prg
-packages/react-components/react-teaching-popover @microsoft/xc-uxe @Mitch-At-Work
 packages/react-components/react-teaching-popover/library @microsoft/xc-uxe @Mitch-At-Work
 packages/react-components/react-teaching-popover/stories @microsoft/xc-uxe @Mitch-At-Work
-packages/react-components/react-timepicker-compat @microsoft/teams-prg
 packages/react-components/react-timepicker-compat/library @microsoft/teams-prg
 packages/react-components/react-timepicker-compat/stories @microsoft/teams-prg
-packages/react-components/react-icons-compat @microsoft/cxe-red @tomi-msft
 packages/react-components/react-icons-compat/library @microsoft/cxe-red @tomi-msft
 packages/react-components/react-icons-compat/stories @microsoft/cxe-red @tomi-msft
-packages/react-components/react-tag-picker @microsoft/teams-prg
 packages/react-components/react-tag-picker/library @microsoft/teams-prg
 packages/react-components/react-tag-picker/stories @microsoft/teams-prg
-packages/react-components/react-carousel @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
 packages/react-components/react-carousel/library @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
 packages/react-components/react-carousel/stories @microsoft/xc-uxe @microsoft/teams-prg @Mitch-At-Work
 packages/react-components/recipes @microsoft/fluentui-react @sopranopillow

.github/workflows/docsite-publish-ghpages.yml

@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 20
           cache: 'yarn'
 
       - name: Install packages
@@ -49,9 +49,10 @@ jobs:
           STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY: ${{ secrets.STORYBOOK_APPINSIGHTS_INSTRUMENTATION_KEY }}
 
       - name: Upload Pages Artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: './apps/public-docsite-v9/dist/storybook/'
+
   deploy:
     runs-on: ubuntu-latest
     needs: build
@@ -69,4 +70,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v1
+        uses: actions/deploy-pages@v4

.github/workflows/pr-vrt-comment.yml

@@ -24,6 +24,7 @@ jobs:
     permissions:
       # necessary to write comments to the PR from the vr-approval-cli
       pull-requests: write
+      id-token: write
     steps:
       - uses: actions/checkout@v4
         with:
@@ -68,15 +69,18 @@ jobs:
           tenant-id: ${{ secrets.AZURE_TENANT_ID }}
           subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
 
+      - name: Fetch Access Token
+        run: |
+          echo "ACCESSTOKEN=$(az account get-access-token --query accessToken --output tsv)" >> $GITHUB_ENV
+
       - name: Run screenshotdiff
         env:
-          API_TOKEN: ${{ FormatPAT.NonBase64PAT }}
           VR_APP_API_URL: 'https://vrapprovaldev2.azurewebsites.net/api/'
           STORAGE_ACCOUNT_ID: 'https://onejstestartifactsprod.blob.core.windows.net/'
-          SYSTEM_ACCESSTOKEN: ${{ System.AccessToken }}
+          SYSTEM_ACCESSTOKEN: ${{ env.ACCESSTOKEN }}
           TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}
           PRINCIPAL_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
-          SERVICE_CONNECTION_ID: ${{ SERVICE-CONNECTION-ID }}
+          SERVICE_CONNECTION_ID: ${{ secrets.ADO_VRT_SERVICE_CONNECTION_ID }}
           GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
           echo "MAKE THIS WORK"

.github/workflows/pr-website-deploy.yml

@@ -38,6 +38,8 @@ jobs:
           node-version: '20'
 
       - run: echo number of CPUs "$(getconf _NPROCESSORS_ONLN)"
+      - name: NodeJS heap default size
+        run: node -e 'console.log(v8.getHeapStatistics().heap_size_limit / 1024 / 1024 + " MB");'
 
       - run: yarn install --frozen-lockfile
 

apps/chart-docsite/.storybook/main.ts

@@ -10,7 +10,7 @@ const config: StorybookConfig = {
     '../src/**/*.mdx',
     '../src/**/index.stories.@(js|jsx|ts|tsx)',
     // packages stories
-    '../../../packages/charts/*/stories/**/index.stories.@(js|jsx|ts|tsx)',
+    '../../../packages/charts/react-charts-preview/stories/**/index.stories.@(js|jsx|ts|tsx)',
   ],
 };
 

apps/chart-docsite/.storybook/preview.tsx

@@ -2,7 +2,8 @@ import type { Preview } from '@storybook/react';
 
 import * as rootPreview from '../../../.storybook/preview';
 
-import { FluentDocsContainer } from '../../public-docsite-v9/src/DocsComponents/FluentDocsContainer.stories';
+// TODO: These custom Docs implementations should be part of custom SB addon/storybook components package
+import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer';
 
 const preview: Preview = {
   ...rootPreview,

apps/chart-docsite/package.json

@@ -2,9 +2,10 @@
   "name": "@fluentui/chart-docsite",
   "version": "1.0.0",
   "private": true,
-  "description": "Fluent UI React v9 documentation",
+  "description": "Fluent UI React Charts Preview documentation",
   "scripts": {
-    "build-storybook": "storybook build -o ./dist/storybook --docs && node ./.storybook/fix-title.js 'Fluent UI Charts v9' ../dist",
+    "build-storybook": "storybook build -o ./dist/storybook --docs",
+    "postbuild-storybook": "node -r ../../scripts/ts-node/src/register ../../scripts/storybook/src/scripts/rewrite-title.ts --title 'Fluent UI Charts v9' --distPath ./dist/storybook",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -21,13 +22,10 @@
   },
   "dependencies": {
     "@fluentui/react-charts-preview": "*",
-    "@fluentui/react-components": "*",
-    "@griffel/react": "^1.5.22",
-    "@microsoft/applicationinsights-web": "^3",
+    "@fluentui/react-storybook-addon": "*",
+    "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-window": "^1.8.6",
-    "tslib": "^2.1.0",
-    "react-hook-form": "^5.7.2"
+    "tslib": "^2.1.0"
   }
 }

apps/chart-docsite/project.json

@@ -2,8 +2,8 @@
   "name": "chart-docsite",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "application",
-  "implicitDependencies": ["tag:type:stories"],
-  "tags": ["platform:web", "vNext"],
+  "implicitDependencies": [],
+  "tags": ["platform:web", "vNext", "charting"],
   "targets": {
     "build-storybook": {
       "dependsOn": [