Merge branch 'master' into feat/react-drawer/allow-aside-tag

* master: (49 commits) Update focus order in sankey chart for vertical navigation (microsoft#31469) chore: use new performant 'type-check' for v9 libaries (microsoft#31454) applying package updates fix(Timepicker-compat): clearIcon not working in freeform (microsoft#31324) chore: re-enable lint rule (microsoft#31459) feat(react-tag-picker): adds text property to TagPickerOption (microsoft#31474) feat(recipes): create package with initial implementation (moved from /apps) (microsoft#31386) applying package updates applying package updates chore: revert globals changes (microsoft#31470) (web-components) Use `ElementInternals` for TextInput elements (microsoft#31201) chore:(docs) Update and migrate component implementation guide (microsoft#31398) disallow all globals in Fluent v9 (microsoft#30967) chore:(react-nav-preview) Recomposing more components and some pixel pushing (microsoft#31387) fix(pr-deploy-site): explicitly set types to not include whole @types/* globals which are causing issues with addition of @types/web (microsoft#31465) fix(recipes-react-components): explicitly set types to not include whole @types/* globals which are cauising issues with addition of @types/web (microsoft#31463) applying package updates applying package updates applying package updates Update IconDirectionContextProvider import to import from specific path (microsoft#31006) ...
marcosmoura · May 28, 2024 · f7f0a2b · f7f0a2b
2 parents fd22abe + ea6069e
commit f7f0a2b
Show file tree

Hide file tree

Showing 844 changed files with 20,463 additions and 9,730 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -252,6 +252,7 @@ packages/react-components/react-timepicker-compat @microsoft/teams-prg
 packages/react-components/react-icons-compat @microsoft/cxe-red @tomi-msft
 packages/react-components/react-tag-picker @microsoft/teams-prg
 packages/react-components/react-carousel-preview @microsoft/xc-uxe @Mitch-At-Work
+packages/react-components/recipes @microsoft/fluentui-react @sopranopillow
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

diff --git a/.storybook/main.js b/.storybook/main.js
@@ -11,17 +11,11 @@ const {
 const tsConfigPath = path.resolve(__dirname, '../tsconfig.base.json');
 
 /**
- * @typedef {import('@storybook/core-common').StorybookConfig} StorybookBaseConfig
+ * @typedef {import('./types').StorybookConfig} StorybookBaseConfig
  *
- * @typedef {{
- *   babel: (options: Record<string, unknown>) => Promise<Record<string, unknown>>;
- *   previewHead: (head: string) => string;
- * }} StorybookExtraConfig
+ * @typedef {import('./types').StorybookExtraConfig} StorybookExtraConfig
  *
- * @typedef {StorybookBaseConfig &
- *   Required<Pick<StorybookBaseConfig, 'stories' | 'addons' | 'webpackFinal'>> &
- *   StorybookExtraConfig
- * } StorybookConfig
+ * @typedef {import('./types').StorybookConfig} StorybookConfig
  */
 
 const previewHeadTemplate = fs.readFileSync(path.resolve(__dirname, 'preview-head-template.html'), 'utf8');

diff --git a/.storybook/types.d.ts b/.storybook/types.d.ts
@@ -0,0 +1,11 @@
+import type { StorybookConfig as StorybookBaseConfig } from '@storybook/core-common';
+
+export type { StorybookBaseConfig };
+export type StorybookExtraConfig = {
+  babel?: (options: Record<string, unknown>) => Promise<Record<string, unknown>>;
+  previewHead?: (head: string) => string;
+};
+
+export type StorybookConfig = StorybookBaseConfig &
+  Required<Pick<StorybookBaseConfig, 'stories' | 'addons' | 'webpackFinal'>> &
+  StorybookExtraConfig;
diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json
@@ -9,7 +9,7 @@
     "just": "just-scripts",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "type-check": "tsc -p . --noEmit",
+    "type-check": "just-scripts type-check",
     "test:perf": "just-scripts perf-test"
   },
   "devDependencies": {

diff --git a/apps/perf-test-react-components/tsconfig.app.json b/apps/perf-test-react-components/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2019",
+    "outDir": "lib",
+    "jsx": "react",
+    "lib": ["ES2019", "DOM"],
+    "types": ["webpack-env"]
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}
diff --git a/apps/perf-test-react-components/tsconfig.json b/apps/perf-test-react-components/tsconfig.json
@@ -1,14 +1,21 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "target": "ES2019",
-    "outDir": "lib",
     "module": "commonjs",
+    "target": "ES2019",
+    "noEmit": true,
+    "isolatedModules": true,
+    "importHelpers": true,
     "jsx": "react",
-    "experimentalDecorators": true,
+    "noUnusedLocals": true,
     "preserveConstEnums": true,
-    "lib": ["ES2019", "DOM"],
-    "types": ["webpack-env"]
+    "skipLibCheck": true
   },
-  "include": ["src"]
+  "include": [],
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
 }
diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json
@@ -9,7 +9,7 @@
     "just": "just-scripts",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
-    "type-check": "tsc -p . --noEmit",
+    "type-check": "just-scripts type-check",
     "test:perf": "just-scripts perf-test"
   },
   "devDependencies": {

diff --git a/apps/perf-test/tsconfig.app.json b/apps/perf-test/tsconfig.app.json
@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES5",
+    "outDir": "lib",
+    "jsx": "react",
+    "lib": ["ES2015", "DOM"],
+    "types": ["webpack-env", "node"]
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+}
diff --git a/apps/perf-test/tsconfig.json b/apps/perf-test/tsconfig.json
@@ -2,13 +2,15 @@
   "extends": "../../tsconfig.base.v8.json",
   "compilerOptions": {
     "target": "es5",
-    "outDir": "lib",
     "module": "commonjs",
-    "jsx": "react",
     "experimentalDecorators": true,
-    "preserveConstEnums": true,
-    "lib": ["ES2015", "DOM"],
-    "types": ["webpack-env", "node"]
+    "preserveConstEnums": true
   },
-  "include": ["src"]
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
 }
diff --git a/apps/pr-deploy-site/package.json b/apps/pr-deploy-site/package.json
@@ -8,7 +8,7 @@
     "clean": "just-scripts clean",
     "generate:site": "just-scripts generate:site",
     "lint": "eslint --ext .js,.ts --cache .",
-    "type-check": "tsc -p ."
+    "type-check": "tsc -p . --noEmit"
   },
   "license": "MIT",
   "devDependencies": {

diff --git a/apps/pr-deploy-site/tsconfig.json b/apps/pr-deploy-site/tsconfig.json
@@ -5,6 +5,7 @@
     "allowJs": true,
     "lib": ["ES2020", "DOM"]
   },
+  "types": [],
   "include": ["pr-deploy-site.js", "just.config.ts"],
   "files": ["../../typings/find-free-port/index.d.ts"]
 }
diff --git a/apps/public-docsite-v9/.storybook/preview.js b/apps/public-docsite-v9/.storybook/preview.js
@@ -1,5 +1,6 @@
 import * as rootPreview from '../../../.storybook/preview';
 
+// TODO: These custom Docs implementations should be part of custom SB addon/storybook components package
 import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories';
 import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories';
 
@@ -44,6 +45,7 @@ export const parameters = {
             ['Component Mapping', 'Color Mapping', 'Troubleshooting'],
             'from v0',
           ],
+          'Recipes',
         ],
         'Theme',
         [

diff --git a/apps/public-docsite-v9/.storybook/tsconfig.json b/apps/public-docsite-v9/.storybook/tsconfig.json
@@ -3,6 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
+    "jsx": "react",
     "types": ["node", "static-assets", "storybook__addons"]
   },
   "include": ["*.js"]

diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json
@@ -36,6 +36,7 @@
     "@fluentui/react-storybook-addon-export-to-sandbox": "*",
     "@fluentui/theme-designer": "*",
     "@fluentui/react-motions-preview": "*",
+    "@fluentui/recipes": "*",
     "@fluentui/react-timepicker-compat": "*",
     "@griffel/react": "^1.5.22",
     "@microsoft/applicationinsights-web": "^3",

diff --git a/apps/public-docsite-v9/tsconfig.json b/apps/public-docsite-v9/tsconfig.json
@@ -7,8 +7,7 @@
     "experimentalDecorators": true,
     "noUnusedLocals": true,
     "strictNullChecks": true,
-    "noImplicitAny": true,
-    "types": ["webpack-env"]
+    "noImplicitAny": true
   },
   "include": [],
   "files": [],

diff --git a/apps/react-18-tests-v8/package.json b/apps/react-18-tests-v8/package.json
@@ -4,7 +4,7 @@
   "version": "8.0.0",
   "private": true,
   "scripts": {
-    "type-check": "tsc -p tsconfig.react-compat-check.json",
+    "type-check": "just-scripts type-check",
     "format": "prettier -w . --ignore-path ../.prettierignore",
     "format:check": "yarn format -c",
     "e2e": "cypress run --component",

diff --git a/apps/react-18-tests-v8/tsconfig.react-compat-check.json b/apps/react-18-tests-v8/tsconfig.react-compat-check.json
diff --git a/apps/react-18-tests-v9/package.json b/apps/react-18-tests-v9/package.json
@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "type-check": "tsc -p tsconfig.react-compat-check.json",
+    "type-check": "just-scripts type-check",
     "lint": "eslint --ext .js,.ts,.tsx ./src",
     "test": "jest --passWithNoTests",
     "format": "prettier -w . --ignore-path ../.prettierignore",

diff --git a/apps/react-18-tests-v9/src/Overflow.cy.tsx b/apps/react-18-tests-v9/src/Overflow.cy.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   makeStyles,
-  shorthands,
   Button,
   Menu,
   MenuTrigger,
@@ -27,20 +26,20 @@ const useStyles = makeStyles({
     display: 'flex',
     flexWrap: 'nowrap',
     minWidth: 0,
-    ...shorthands.overflow('hidden'),
+    overflow: 'hidden',
   },
 
   resizableArea: {
     minWidth: '200px',
     maxWidth: '800px',
-    ...shorthands.border('2px', 'solid', tokens.colorBrandBackground),
-    ...shorthands.padding('20px', '10px', '10px', '10px'),
+    border: `2px solid ${tokens.colorBrandBackground}`,
+    padding: '20px 10px 10px 10px',
     position: 'relative',
     resize: 'horizontal',
     '::after': {
       content: `'Resizable Area'`,
       position: 'absolute',
-      ...shorthands.padding('1px', '4px', '1px'),
+      padding: '1px 4px 1px',
       top: '-2px',
       left: '-2px',
       fontFamily: 'monospace',

diff --git a/apps/react-18-tests-v9/tsconfig.react-compat-check.json b/apps/react-18-tests-v9/tsconfig.react-compat-check.json
diff --git a/apps/recipes-react-components/package.json b/apps/recipes-react-components/package.json
@@ -9,7 +9,7 @@
     "format": "prettier . -w --ignore-path ../../.prettierignore",
     "lint": "just-scripts lint",
     "start": "start-storybook",
-    "type-check": "tsc"
+    "type-check": "just-scripts type-check"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",

diff --git a/apps/recipes-react-components/tsconfig.app.json b/apps/recipes-react-components/tsconfig.app.json
@@ -3,9 +3,7 @@
   "compilerOptions": {
     "noEmit": true,
     "lib": ["ES2019", "dom"],
-    "declaration": true,
-    "inlineSources": true
+    "types": []
   },
-  "exclude": [],
   "include": ["./src/**/*.ts", "./src/**/*.tsx"]
 }
diff --git a/apps/recipes-react-components/tsconfig.json b/apps/recipes-react-components/tsconfig.json
@@ -5,11 +5,9 @@
     "target": "ES2019",
     "noEmit": true,
     "isolatedModules": true,
-    "importHelpers": true,
     "jsx": "react",
     "noUnusedLocals": true,
-    "preserveConstEnums": true,
-    "skipLibCheck": true
+    "preserveConstEnums": true
   },
   "include": [],
   "files": [],

diff --git a/apps/ssr-tests-v9/package.json b/apps/ssr-tests-v9/package.json
@@ -14,7 +14,7 @@
     "lint": "just-scripts lint",
     "storybook": "start-storybook",
     "test": "jest --passWithNoTests",
-    "type-check": "tsc -b tsconfig.json",
+    "type-check": "just-scripts type-check",
     "test-ssr": "test-ssr \"./src/stories/**/*.stories.tsx\""
   },
   "dependencies": {

diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
@@ -4,6 +4,7 @@
   "description": "Server-side rendering tests for @fluentui/react.",
   "private": true,
   "scripts": {
+    "type-check": "tsc -p . --noEmit --baseUrl .",
     "build": "just-scripts build",
     "bundle": "just-scripts bundle",
     "test": "just-scripts test",
@@ -13,13 +14,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@fluentui/react": "*",
-    "@microsoft/load-themed-styles": "^1.10.26",
     "@types/mocha": "7.0.2",
-    "@fluentui/public-docsite-resources": "*",
     "mocha": "7.2.0",
+    "@microsoft/load-themed-styles": "^1.10.26",
     "@fluentui/scripts-tasks": "*",
-    "@fluentui/scripts-webpack": "*"
+    "@fluentui/scripts-webpack": "*",
+    "@fluentui/react": "*",
+    "@fluentui/public-docsite-resources": "*"
   },
   "dependencies": {
     "tslib": "^2.1.0"

diff --git a/apps/ssr-tests/test/test.js b/apps/ssr-tests/test/test.js
@@ -32,6 +32,12 @@ describe('Fabric components', () => {
     let links = AppDefinition.examplePages[i].links;
     for (let j = 0; j < links.length; j++) {
       let { key, component } = links[j];
+      if (!key) {
+        throw new Error(`Component key (current value "${key}") is missing for ${component}`);
+      }
+      if (!component) {
+        throw new Error(`Component (current value "${component}") is missing for ${key}`);
+      }
 
       testRender(key, component);
     }
@@ -52,14 +58,19 @@ describe('Utilities', () => {
   });
 });
 
+/**
+ *
+ * @param {string} componentName
+ * @param {React.ComponentClass | (() => JSX.Element)} component
+ */
 function testRender(componentName, component) {
   it(`${componentName} can render in a server environment`, done => {
     let elem = React.createElement(component);
 
     try {
       ReactDOMServer.renderToString(elem);
       done();
-    } catch (e) {
+    } catch (/** @type {any} */ e) {
       done(new Error(e));
     }
   });

diff --git a/apps/ssr-tests/tsconfig.json b/apps/ssr-tests/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@tsconfig/node14/tsconfig.json",
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "commonjs",
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "preserveConstEnums": true,
+    "checkJs": true,
+    "allowJs": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["test/"]
+}
diff --git a/apps/vr-tests-react-components/.storybook/main.js b/apps/vr-tests-react-components/.storybook/main.js
@@ -38,7 +38,6 @@ module.exports = /** @type {import('../../../.storybook/main').StorybookBaseConf
     builder: 'webpack5',
     disableTelemetry: true,
   },
-  babel: {},
   typescript: {
     // disable react-docgen-typescript (totally not needed here, slows things down a lot)
     reactDocgen: false,

diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
@@ -10,7 +10,7 @@
     "lint": "just-scripts lint",
     "start": "start-storybook",
     "test": "just-scripts test",
-    "type-check": "tsc",
+    "type-check": "tsc -p . --noEmit --baseUrl .",
     "vr:build": "yarn build",
     "vr:test": "storywright  --browsers chromium --url dist/storybook --destpath dist/screenshots --waitTimeScreenshot 500 --concurrency 4 --headless true"
   },