chore(web-components-v3): migrate to node 18 (#30026)

* chore: migrate to node 18 (#29598) * chore: migrate to node 18 * chore: bump eslint-plugin-jsdoc which support node 18 * generate changefile * chore: ignore plugin-jsdoc from syncpack * chore(utilities): use Timers types based on environment to avoid TS failures introduced with node 18 types * chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox * generate changefiles * restrict node version * update yarn.lock * ci: bump devcontainer to node 18 (#29759) * deduplicate semver * theme designers: changes based on dan and daisy's feedback (#24038) * for daisy: Can the default theme be the Web one (not Teams)? Web should be the first one selected by default. Teams is one option in the menu. * suggestion from dan: when he inputted his own custom Hex#, the color indicator to the right didn't change -- added rules to hex input * remove teams theme * capitalize for consistency * custom theme now applies to sidebar per dan's request * uppercase consistency * revert sidebar change * theme designer: make name editable (#24098) * add dropdown * Update yarn.lock * cleanup dropdown use * lock update * remove unread values * use dropdown + add avatar * add editable name * palette change * force alphanumeric * filter input name string * update name * revert palette change Co-authored-by: Micah Godbolt <mgodbolt@microsoft.com> * Theme designer: Move colors to local files (#27191) * move colors code locally to allow for customization * clean up files * deduplicate prettier * fix: UseNode@1 instead of NodeTool * format files * chore: bump babel-loader to mitigate '0308010c:digital envelope routines::unsupported' webpack error within local-sandbox * update yarn.lock * chore: comment out unused codeblock to fix TS transpile errors --------- Co-authored-by: Martin Hochel <martinhochel@microsoft.com> Co-authored-by: Emma Jiang <31319479+emmayjiang@users.noreply.github.com> Co-authored-by: Micah Godbolt <mgodbolt@microsoft.com>
microsoft · Dec 13, 2023 · 12da476 · 12da476
1 parent 8e4b69e
commit 12da476
Show file tree

Hide file tree

Showing 31 changed files with 1,368 additions and 110 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -2,5 +2,5 @@
   "buildCommand": "build:codesandbox",
   "packages": ["packages/react", "packages/react-components/react-components"],
   "sandboxes": ["x5u3t", "spnyu"],
-  "node": "16"
+  "node": "18"
 }
diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
@@ -1,19 +1,6 @@
-# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
-
-# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
-ARG VARIANT="14-bullseye"
-FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
-
-# [Optional] Uncomment this section to install additional OS packages.
-# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
-#     && apt-get -y install --no-install-recommends <your-package-list-here>
-
-# [Optional] Uncomment if you want to install an additional version of node using nvm
-# ARG EXTRA_NODE_VERSION=10
-# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
-
-# [Optional] Uncomment if you want to install more global node modules
-# RUN su node -c "npm install -g <your-package-list-here>"
+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
diff --git a/.devcontainer/README.md b/.devcontainer/README.md
@@ -4,7 +4,7 @@ This configuration is based on the base Node container provided by VSCode, it sh
 
 > 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/tree/v0.222.0/containers/javascript-node/.devcontainer/base.Dockerfile
+> 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
 

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -4,10 +4,9 @@
   "name": "Node.js",
   "build": {
     "dockerfile": "Dockerfile",
-    // Update 'VARIANT' to pick a Node version: 16, 14, 12.
-    // Append -bullseye or -buster to pin to an OS version.
-    // Use -bullseye variants on local arm64/Apple Silicon.
-    "args": { "VARIANT": "14" }
+    "args": {
+      "VARIANT": "18-bookworm"
+    }
   },
   // Set *default* container specific settings.json values on container create.
   "settings": {},

diff --git a/.devops/templates/tools.yml b/.devops/templates/tools.yml
@@ -1,8 +1,12 @@
 # Install versions of Node and Yarn required by build pipelines.
 steps:
-  - task: NodeTool@0
+  - task: UseNode@1
     inputs:
-      versionSpec: '16.18.1'
+      # 👉 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'
 

diff --git a/.github/workflows/check-packages.yml b/.github/workflows/check-packages.yml
@@ -12,7 +12,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
           cache: 'yarn'
 
       - uses: tj-actions/changed-files@v34
@@ -44,7 +44,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
 
       - uses: actions/github-script@v6
         with:
@@ -70,7 +70,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
 
       - uses: actions/github-script@v6
         with:

diff --git a/.github/workflows/docsite-publish-chromatic.yml b/.github/workflows/docsite-publish-chromatic.yml
@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
           cache: 'yarn'
 
       - name: Install packages

diff --git a/.github/workflows/docsite-publish-ghpages.yml b/.github/workflows/docsite-publish-ghpages.yml
@@ -37,7 +37,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.18.1
+          node-version: 18.x
           cache: 'yarn'
 
       - name: Install packages

diff --git a/change/@fluentui-eslint-plugin-222b39b1-1e9b-458f-8ddf-0dfef3a6717e.json b/change/@fluentui-eslint-plugin-222b39b1-1e9b-458f-8ddf-0dfef3a6717e.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: bump eslint-plugin-jsdoc to version which support node 18",
+  "packageName": "@fluentui/eslint-plugin",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-utilities-9901c7ce-5a05-4473-ab4f-ff74df9878eb.json b/change/@fluentui-utilities-9901c7ce-5a05-4473-ab4f-ff74df9878eb.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore: use Timers types based on environment to avoid TS failures introduced with node 18 types",
+  "packageName": "@fluentui/utilities",
+  "email": "martinhochel@microsoft.com",
+  "dependentChangeType": "none"
+}
diff --git a/lage.config.js b/lage.config.js
@@ -22,13 +22,16 @@ module.exports = {
     'change/**',
     'rfcs/**',
     'README.md',
+    '*.md',
     '.vscode/**',
     '.github/*.yml',
     '.github/*.json',
     '.github/*.md',
     '.github/CODEOWNERS',
     '.github/MAINTAINERS',
     '.github/ISSUE_TEMPLATE/**',
+    '.github/policies/**',
+    '.devcontainer/**',
   ],
 
   // All of these options are sent to `backfill`: https://github.com/microsoft/backfill/blob/master/README.md

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "engines": {
-    "node": "^16.18.1"
+    "node": "^18.0.0 || ^20.0.0"
   },
   "scripts": {
     "build": "lage build --verbose",
@@ -166,9 +166,8 @@
     "@types/lodash": "4.14.182",
     "@types/markdown-table": "2.0.0",
     "@types/micromatch": "4.0.2",
-    "@types/node": "16.18.1",
-    "@types/node-fetch": "2.5.7",
-    "@types/prettier": "2.2.3",
+    "@types/node": "18.18.6",
+    "@types/prettier": "2.7.2",
     "@types/progress": "2.0.5",
     "@types/prompts": "2.4.1",
     "@types/react": "17.0.44",
@@ -193,7 +192,7 @@
     "ajv": "8.4.0",
     "autoprefixer": "10.2.1",
     "babel-jest": "26.6.3",
-    "babel-loader": "8.2.2",
+    "babel-loader": "8.3.0",
     "babel-plugin-annotate-pure-calls": "0.4.0",
     "babel-plugin-annotate-pure-imports": "1.0.0-1",
     "babel-plugin-iife-wrap-react-components": "1.0.0-5",
@@ -233,7 +232,7 @@
     "eslint-plugin-es": "4.1.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jest": "23.20.0",
-    "eslint-plugin-jsdoc": "^36.0.7",
+    "eslint-plugin-jsdoc": "39.9.1",
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-playwright": "0.15.3",
     "eslint-plugin-react": "7.26.0",

diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -23,7 +23,7 @@
     "eslint-plugin-deprecation": "^1.2.1",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^23.13.2",
-    "eslint-plugin-jsdoc": "^36.0.7",
+    "eslint-plugin-jsdoc": "^39.9.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",

diff --git a/packages/fluentui/local-sandbox/package.json b/packages/fluentui/local-sandbox/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "license": "MIT",
   "scripts": {
-    "build:withdependencies": "yarn --cwd ../../.. build --scope=@fluentui/local-sandbox --include-filtered-dependencies",
+    "build:withdependencies": "yarn lage build --verbose --scope=@fluentui/local-sandbox --include-filtered-dependencies",
     "build": "webpack",
     "build:production": "webpack -p",
     "serve": "node ./server.js"

diff --git a/packages/react-components/theme-designer/package.json b/packages/react-components/theme-designer/package.json
@@ -37,7 +37,6 @@
     "tslib": "^2.1.0",
     "@fluentui/react-components": "^9.15.0",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluent-blocks/colors": "9.2.0",
     "codesandbox-import-utils": "2.2.3",
     "@types/dedent": "0.7.0",
     "@fluentui/react-alert": "9.0.0-beta.31",

diff --git a/packages/react-components/theme-designer/src/ThemeDesigner.tsx b/packages/react-components/theme-designer/src/ThemeDesigner.tsx
@@ -31,7 +31,7 @@ export const ThemeDesigner: React.FC<ThemeDesignerProps> = props => {
   useStaticStyles();
 
   const [appState, dispatchAppState] = useThemeDesignerReducer();
-  const [name, setName] = React.useState<string>('myTheme');
+  const [name, setName] = React.useState<string>('Untitled');
 
   const { darkOverrides, isDark, lightOverrides, theme } = appState;
   const overrides = isDark ? darkOverrides : lightOverrides;