Merge branch 'master' into master

.babelrc-v9.json

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@fluentui/scripts-babel/preset-v9",
+      {
+        "tsBaseConfigPath": "./tsconfig.base.json"
+      }
+    ]
+  ]
+}

.codesandbox/ci.json

@@ -1,6 +1,6 @@
 {
   "buildCommand": "build:codesandbox",
-  "packages": ["packages/react"],
-  "sandboxes": ["x5u3t"],
-  "node": "12"
+  "packages": ["packages/react", "packages/react-components/react-components"],
+  "sandboxes": ["x5u3t", "spnyu"],
+  "node": "18"
 }

.devcontainer/Dockerfile

@@ -0,0 +1,6 @@
+ARG VARIANT=18-bookworm
+# https://github.com/devcontainers/images/tree/main/src/typescript-node
+FROM mcr.microsoft.com/devcontainers/typescript-node:1-${VARIANT}
+
+# Cypress linux pre-requisites https://docs.cypress.io/guides/getting-started/installing-cypress#Linux-Prerequisites
+RUN apt-get update && apt-get -y install libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

.devcontainer/README.md

@@ -0,0 +1,42 @@
+# Dev Container
+
+This configuration is based on the base Node container provided by VSCode, it should work out of the box for most users.
+
+> For more information on how to use/create `development containers` follow the [VSCode Documentation](https://code.visualstudio.com/docs/remote/create-dev-container)
+
+> See here for more information on the base container https://github.com/microsoft/vscode-dev-containers/blob/main/containers/javascript-node/.devcontainer/base.Dockerfile
+
+## Cypress tests
+
+To run Cypress in dev containers some additional configuration is required, since Cypress depends on opening a browser (which requires GUI), a `DISPLAY` Environment Variable should be exported by the host to tell docker how to properly run GUI. Follow the instructions bellow to add to host OS the required software.
+
+> ⚠️ You should rebuild the container every time your IP address changes if you want to run Cypress tests
+
+### WSL2
+
+1. Install [VcXsrv](https://sourceforge.net/projects/vcxsrv)
+2. Run the XLaunch application, then in it's application menu you'll find a Preferences choice. In the Preferences make this setting:
+   - Allow connections from network clients
+     > This opens the display so it accepts XServer connections from any non-local computer. The Docker container we're about to create counts - as would a Linux machine in your office.
+3. export `DISPLAY` Environment Variable somewhere (e.g `.bashrc`, `.zshrc`)
+   ```bash
+   # get your IP Address
+   IP=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}')
+   export DISPLAY = $IP:0
+   ```
+
+### MacOS
+
+1. Install [XQuartz](https://www.xquartz.org/)
+2. Run the XQuartz application, then in it's application menu you'll find a Preferences choice. In the Preferences make this setting:
+   - Allow connections from network clients.
+     > This opens the display so it accepts X11 connections from any non-local computer. The Docker container we're about to create counts - as would a Linux machine in your office.
+3. Save `DISPLAY` and `IP` environment variables somewhere (e.g: `.bashrc`, `.zshrc`)
+   ```bash
+     export IP = $(ipconfig getifaddr en0) # en0 or eth0... might vary depending on your WI-FI/Cable connection
+     export DISPLAY = $IP:0
+   ```
+4. With XQuartz **NOT** running run this once to add IP address:
+   ```bash
+     xhost +$IP
+   ```

.devcontainer/devcontainer.json

@@ -0,0 +1,21 @@
+{
+  "name": "Node.js",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": {
+      "VARIANT": "18-bookworm"
+    }
+  },
+  "features": {
+    "ghcr.io/devcontainers/features/github-cli:1": {}
+  },
+  "containerEnv": {
+    // Required Environment Variable to properly run Cypress
+    "DISPLAY": "${localEnv:DISPLAY}"
+  },
+  "customizations": {
+    "vscode": {
+      "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
+    }
+  }
+}

.devops/templates/build-test-lint.yml

@@ -0,0 +1,48 @@
+steps:
+  - template: tools.yml
+
+  - task: Bash@3
+    inputs:
+      filePath: yarn-ci.sh
+    displayName: yarn (install packages)
+
+  - script: |
+      yarn nx run @fluentui/workspace-plugin:check-graph
+      yarn nx g @fluentui/workspace-plugin:tsconfig-base-all --verify
+      yarn nx g @fluentui/workspace-plugin:normalize-package-dependencies --verify
+
+    displayName: Workspace lint
+
+  - script: |
+      # @fluentui/api-docs is used within apps/public-docsite-resources/just.config.ts, thus it needs to be build in advance
+      yarn workspace @fluentui/api-docs build
+      # @fluentui/digest is used within packages/fluentui/perf-test-northstar/just.config.ts, thus it needs to be build in advance
+      yarn workspace @fluentui/digest build
+      yarn tsc -p ./tsconfig.json
+    displayName: Type-check just.config.ts files
+
+  - script: |
+      yarn check:installed-dependencies-versions
+    displayName: 'check packages: installed dependencies versions'
+
+  - script: |
+      if [[ -n "$(targetBranch)" ]]; then
+        yarn format --since $(targetBranch) --check
+      else
+        yarn format --all --check
+      fi
+    displayName: check formatting
+
+  ## Danger.js checks for Fluent UI N*
+  - script: |
+      DANGER_DISABLE_TRANSPILATION="true" yarn danger ci
+    displayName: danger
+    condition: eq(variables.isPR, true)
+    env:
+      DANGER_GITHUB_API_TOKEN: $(DANGER_GITHUB_API_TOKEN)
+
+  - script: |
+      yarn buildci $(sinceArg)
+    displayName: build, test, lint, test-ssr
+
+  - template: cleanup.yml

.devops/templates/cleanup.yml

@@ -1,18 +1,18 @@
 parameters:
-  - name: checkForChangedFiles
+  - name: checkForModifiedFiles
     type: boolean
     default: true
 
 steps:
   - script: |
-      npm run check-for-changed-files
-    condition: ${{ parameters.checkForChangedFiles }}
-    displayName: check for changed files
+      yarn check:modified-files
+    condition: ${{ parameters.checkForModifiedFiles }}
+    displayName: 'check: modified files'
 
   # In theory the "workspace: clean: all" setting should handle this, but it doesn't always seem to work.
   # ReallyClean is a custom task from our internal UI Fabric azure-devops-tasks repo which attempts to
   # delete the given directory with multiple retries.
-  - task: ReallyClean@0
-    inputs:
-      directory: $(Agent.BuildDirectory)
-    condition: always()
+  # - task: ReallyClean@0
+  #   inputs:
+  #     directory: $(Agent.BuildDirectory)
+  #   condition: always()

.devops/templates/deployE2E.yml

@@ -0,0 +1,46 @@
+steps:
+  - template: tools.yml
+
+  - task: Bash@3
+    inputs:
+      filePath: yarn-ci.sh
+    displayName: yarn
+
+  # this also builds FUI N* docs if appropriate
+  - script: |
+      yarn bundle  $(sinceArg)
+    displayName: bundle
+
+  - script: |
+      yarn lage build-storybook  --verbose $(sinceArg)
+    displayName: build Storybooks
+
+  ## This runs regardless of scope, the app will adapt to the scope as well
+  - script: |
+      yarn workspace @fluentui/pr-deploy-site generate:site
+    displayName: generate PR Deploy Site
+
+  - task: AzureUpload@2
+    displayName: Upload PR deploy site
+    inputs:
+      azureSubscription: $(azureSubscription)
+      BlobPrefix: $(deployBasePath)
+      ContainerName: '$web'
+      SourcePath: 'apps/pr-deploy-site/dist'
+      storage: $(azureStorage)
+
+  - task: GithubPRStatus@0
+    displayName: 'Update PR deploy site github status'
+    inputs:
+      githubOwner: microsoft
+      githubRepo: fluentui
+      githubContext: 'Pull request demo site'
+      githubDescription: 'Click "Details" to go to the deployed demo site for this pull request'
+      # This MUST have a trailing slash, or the links to PR deploy site assets won't work
+      githubTargetLink: $(deployUrl)/
+
+  - script: |
+      yarn e2e $(sinceArg)
+    displayName: Cypress E2E tests
+
+  - template: cleanup.yml

.devops/templates/runpublishvrscreenshot.yml

@@ -0,0 +1,57 @@
+parameters:
+  - name: fluentVersion
+    type: string
+    default: v8
+  - name: vrTestPackageName
+    type: string
+    default: '@fluentui/vr-tests'
+  - name: vrTestPackagePath
+    type: string
+    default: 'apps/vr-tests'
+
+steps:
+  - task: Bash@3
+    inputs:
+      filePath: yarn-ci.sh
+    displayName: yarn (install packages)
+
+  - script: |
+      isPR=${{lower(eq(variables['Build.Reason'], 'PullRequest'))}}
+      echo $isPR
+      if [[ $isPR == true ]]; then
+        packageAffected=$(yarn --silent check:affected --package ${{ parameters.vrTestPackageName }})
+        if [[ $packageAffected == false ]]; then
+          echo "In PR pipeline but NOT affecting test package. Skipping test run"
+          echo "##vso[task.setvariable variable=vrTestSkip;]yes"
+        else
+          echo "In PR pipeline and affecting test package. NOT Skipping test run"
+          echo "##vso[task.setvariable variable=vrTestSkip;]no"
+        fi
+      else
+        echo "Not in PR pipeline. NOT Skipping test run"
+        echo "##vso[task.setvariable variable=vrTestSkip;]no"
+      fi
+    displayName: Check if vrTests should be skipped
+
+  - script: |
+      yarn workspace ${{ parameters.vrTestPackageName }} vr:build
+    displayName: Build VR tests components package
+    condition: eq(variables['vrTestSkip'], 'no')
+
+  - script: |
+      yarn workspace ${{ parameters.vrTestPackageName }} vr:test --verbose
+    displayName: 'Run VR tests'
+    condition: eq(variables['vrTestSkip'], 'no')
+
+  - script: |
+      mkdir -p screenshots
+      cp -rf ${{ parameters.vrTestPackagePath }}/dist/screenshots/*.png screenshots/
+    displayName: Collate Artifacts
+    condition: eq(variables['vrTestSkip'], 'no')
+
+  - task: PublishBuildArtifacts@1
+    inputs:
+      PathtoPublish: 'screenshots'
+      ArtifactName: 'vrscreenshot${{ parameters.fluentVersion }}'
+      publishLocation: 'Container'
+    condition: eq(variables['vrTestSkip'], 'no')

.devops/templates/tools.yml

@@ -1,17 +1,21 @@
 # Install versions of Node and Yarn required by build pipelines.
 steps:
-  - task: NodeTool@0
+  - task: UseNode@1
     inputs:
-      versionSpec: '12.x'
-      checkLatest: true
+      # 👉 NOTE:
+      # - we can use only versions that ship with container, otherwise we will run into nodejs installation issues.
+      # - as 1es bumps those versions within container automatically we need to use `<major>.x` to not run into issues once they bump the versions.
+      # https://github.com/actions/runner-images/blob/ubuntu20/20230924.1/images/linux/Ubuntu2004-Readme.md#nodejs
+      version: '18.x'
+      checkLatest: false
     displayName: 'Install Node.js'
+    retryCountOnTaskFailure: 1
 
-  - task: YarnInstaller@0
-    displayName: 'Use Yarn 1.22.x'
-    inputs:
-      versionSpec: 1.22.x
-      checkLatest: false
-      includePrerelease: false
+  - script: |
+      echo "nodejs:" && node -v
+      echo "yarn:" && yarn -v
+      echo "npm:" && npm -v
+    displayName: 'print NodeJS,package managers versions'
 
   # For multiline scripts, we want the whole task to fail if any line of the script fails.
   # ADO doesn't have bash configured this way by default. To fix we override the SHELLOPTS built-in variable.

.devops/templates/variables.yml

@@ -13,6 +13,9 @@ parameters:
     default: true
 
 variables:
+  # Prevents failures on CI when "caniuse-lite" becomes outdated
+  BROWSERSLIST_IGNORE_OLD_DATA: true
+
   # Also accessed as process.env.DEPLOYHOST
   deployHost: 'fluentuipr.z22.web.core.windows.net'
 

.eslintrc.json

@@ -1,4 +1,3 @@
-// Default eslintrc for packages without one, or files outside a package
 {
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -20,5 +19,12 @@
     "**/node_modules",
     "**/temp",
     "**/*.scss.ts"
+  ],
+  "overrides": [
+    {
+      "files": "*.json",
+      "parser": "jsonc-eslint-parser",
+      "rules": {}
+    }
   ]
 }

.gitattributes

@@ -1,2 +1,5 @@
+# Ignore yarn binary from Languages bar - see https://github.com/github/linguist
+.yarn/releases/*.js linguist-vendored
+
 # API files should be checked in with Unix-style newlines
 *.api.md text=auto