chore(react-components): migrate to new dx stage-1 (#19040)

* chore(react-components): migrate to new dx stage-1

* fix(react-components): make static assets work after migration

* ix(react-components): make manager UI render the same prior to migration

* fix(react-components): sort stories the same way prior to migration

* chore(typings): add *.svg to global ts extensions

* Change files

* fix(scripts): resolve api-extractor execution issue within packages with new DX

* ci: make react-components storybook build after migration to new dx

* chore: add all teams as owners of react-components suite

* fixup! fix(scripts): resolve api-extractor execution issue within packages with new DX

.github/CODEOWNERS

@@ -122,7 +122,7 @@ packages/react-badge/ @ling1726 @layershifter @assuncaocharles @behowell
 packages/react-button/ @microsoft/cxe-red @dzearing @khmakoto
 packages/react-card/ @microsoft/cxe-prg
 packages/react-checkbox/ @microsoft/cxe-red @khmakoto
-packages/react-components/ @microsoft/teams-prg
+packages/react-components/ @microsoft/teams-prg @microsoft/cxe-prg @microsoft/cxe-red
 packages/react-focus/ @microsoft/cxe-red @khmakoto
 packages/react-image/ @microsoft/cxe-prg
 packages/react-text/ @microsoft/cxe-prg

azure-pipelines.yml

@@ -75,6 +75,10 @@ jobs:
           yarn bundle --no-cache $(sinceArg)
         displayName: bundle
 
+      - script: |
+          yarn lage build-storybook --no-cache $(sinceArg) --scope @fluentui/react-components
+        displayName: build react-components storybook
+
       ## This runs regardless of scope, the app will adapt to the scope as well
       - script: |
           yarn workspace @fluentui/pr-deploy-site generate:site

change/@fluentui-react-components-9ea0436e-2e31-479f-8532-b1338b04729c.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "chore(react-components): migrate to new dx stage-1",
+  "packageName": "@fluentui/react-components",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}

jest.config.js

@@ -34,6 +34,7 @@ module.exports = {
     '<rootDir>/packages/react-tooltip',
     '<rootDir>/packages/react-card',
     '<rootDir>/packages/react-checkbox',
+    '<rootDir>/packages/react-components',
     '<rootDir>/packages/react-storybook-addon',
     '<rootDir>/packages/react-switch',
   ],

nx.json

@@ -82,7 +82,7 @@
     "@fluentui/react-cards": { "implicitDependencies": [] },
     "@fluentui/react-charting": { "implicitDependencies": [] },
     "@fluentui/react-checkbox": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
-    "@fluentui/react-components": { "implicitDependencies": [] },
+    "@fluentui/react-components": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },
     "@fluentui/react-compose": { "implicitDependencies": [] },
     "@fluentui/react-conformance": { "implicitDependencies": [] },
     "@fluentui/react-context-selector": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] },

package.json

@@ -131,6 +131,7 @@
     "@types/prettier": "2.2.3",
     "@types/react": "16.9.42",
     "@types/react-dom": "16.9.10",
+    "@types/react-test-renderer": "16.8.2",
     "@types/semver": "^5.5.0",
     "@types/tmp": "0.2.0",
     "@types/webpack-dev-middleware": "4.1.0",
@@ -202,6 +203,7 @@
     "react": "16.8.6",
     "react-app-polyfill": "2.0.0",
     "react-dom": "16.8.6",
+    "react-test-renderer": "16.8.6",
     "sass-loader": "10.1.1",
     "satisfied": "^1.1.1",
     "semver": "^6.2.0",
@@ -285,6 +287,7 @@
         "dependencies": [
           "@babel/core",
           "@babel/preset-typescript",
+          "@types/react-test-renderer",
           "@typescript-eslint/eslint-plugin",
           "@typescript-eslint/experimental-utils",
           "@typescript-eslint/parser",
@@ -309,6 +312,7 @@
           "loader-utils",
           "pretty-bytes",
           "schema-utils",
+          "react-test-renderer",
           "tslib",
           "terser",
           "terser-webpack-plugin",

packages/react-components/.storybook/fluentuiTheme.js

@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming';
+import logo from '../public/fluent.svg';
+
+// Theming and branding the storybook to fluent. Taken from https://storybook.js.org/docs/react/configure/theming
+export default create({
+  base: 'light',
+
+  // Storybook-specific color palette
+  colorPrimary: 'rgba(255, 255, 255, .4)',
+  colorSecondary: '#0078d4',
+
+  // UI
+  appBg: '#ffffff',
+  appContentBg: '#ffffff',
+  appBorderColor: '#e0e0e0', // use msft gray
+  appBorderRadius: 4,
+
+  // Fonts
+  fontBase:
+    '"Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;',
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#11100f',
+  textInverseColor: '#0078d4', // use msft primary blue default
+
+  // Toolbar default and active colors
+  barSelectedColor: '#0078d4', // use msft primary blue default
+
+  // Form colors
+  inputBorderRadius: 4,
+
+  // Use the fluent branding for the upper left image
+  brandTitle: 'Fluent UI React vNext Components',
+  brandUrl: 'https://github.com/microsoft/fluentui',
+  brandImage: logo,
+});

packages/react-components/.storybook/main.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+const rootMain = require('../../../.storybook/main');
+
+module.exports = /** @type {Pick<import('../../../.storybook/main').StorybookConfig,'addons'|'stories'|'webpackFinal'>} */ ({
+  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)', ...getVnextStories()],
+  addons: [...rootMain.addons],
+  webpackFinal: (config, options) => {
+    const localConfig = { ...rootMain.webpackFinal(config, options) };
+
+    return localConfig;
+  },
+});
+
+function getVnextStories() {
+  /** @type {Record<string,unknown>} */
+  const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, `../package.json`), 'utf-8'));
+
+  const dependencies = /** @type {Record<string,string>} */ (packageJson.dependencies);
+
+  return Object.keys(dependencies)
+    .filter(pkgName => pkgName.startsWith('@fluentui/'))
+    .map(pkgName => '../../' + pkgName.replace('@fluentui/', '') + '/src/**/*.stories.@(ts|tsx|mdx)');
+}

packages/react-components/.storybook/manager-head.html

@@ -0,0 +1,111 @@
+<!--
+  Override the default favicon used in the Storybook in the browser tab.
+ -->
+<link rel="shortcut icon" href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png" />
+<link
+  rel="icon"
+  type="image/png"
+  href="https://www.microsoft.com/design/fluent/assets/favicons/favicon-192.png"
+  sizes="192x192"
+/>
+
+<!--
+  Override the default styles used in the Storybook svg icons for the left tree panel.
+
+  @see https://storybook.js.org/docs/react/configure/theming#css-escape-hatches
+
+  > 💡 NOTE:
+  >
+  > This is brittle way for providing custom non thenable styles for manager UI
+  >
+  > Those selectors might change on any storybook version bump.
+ -->
+
+<style>
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI Light'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/latest.ttf) format('truetype');
+    font-weight: 100;
+  }
+
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI Semilight'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semilight/latest.ttf) format('truetype');
+    font-weight: 200;
+  }
+
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/normal/latest.ttf) format('truetype');
+    font-weight: 400;
+  }
+
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI Semibold'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/semibold/latest.ttf) format('truetype');
+    font-weight: 600;
+  }
+
+  @font-face {
+    font-family: 'Segoe UI';
+    src: local('Segoe UI Bold'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff2) format('woff2'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.woff) format('woff'),
+      url(//c.s-microsoft.com/static/fonts/segoe-ui/west-european/bold/latest.ttf) format('truetype');
+    font-weight: 700;
+  }
+
+  #storybook-explorer-searchfield {
+    font-weight: 400 !important;
+    font-size: 14px !important;
+    letter-spacing: -0.01em !important;
+    line-height: 14px !important;
+  }
+
+  .sidebar-item svg,
+  .sidebar-svg-icon {
+    color: #11100f !important;
+  }
+
+  .sidebar-item[data-selected='true'] svg,
+  .sidebar-item[data-selected='true'] .sidebar-svg-icon {
+    color: #ffffff !important;
+  }
+
+  .sidebar-subheading {
+    font-weight: 600 !important;
+    font-size: 16px !important;
+    letter-spacing: 0px !important;
+    line-height: 24px !important;
+    text-transform: none !important;
+    color: #11100f !important;
+  }
+
+  .sidebar-item {
+    font-weight: 400 !important;
+    font-size: 14px !important;
+    letter-spacing: -0.01em !important;
+    line-height: 14px !important;
+    color: #11100f !important;
+  }
+
+  .sidebar-item[data-selected='true'] {
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    letter-spacing: -0.01em !important;
+    line-height: 14px !important;
+    color: #ffffff !important;
+  }
+</style>

packages/react-components/.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/addons';
+import fluentuiTheme from './fluentuiTheme';
+
+addons.setConfig({
+  showPanel: true,
+  panelPosition: 'right',
+  theme: fluentuiTheme,
+});

packages/react-components/.storybook/preview.js

@@ -0,0 +1,26 @@
+import * as rootPreview from '../../../.storybook/preview';
+
+// load global styles
+import '../public/intro.css';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = {
+  ...rootPreview.parameters,
+  options: {
+    storySort: {
+      /**
+       * @see https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
+       */
+      order: [
+        'Concepts',
+        ['Introduction', 'Developer', ['Quick Start', 'Styling Components']],
+        'Theme',
+        'Components',
+        'Migrations',
+      ],
+    },
+  },
+};

packages/react-components/.storybook/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true
+  },
+  "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"],
+  "include": ["../src/**/*", "*.js"]
+}

packages/react-components/config/api-extractor.json

@@ -1,3 +1,4 @@
 {
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
   "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
 }

packages/react-components/config/api-extractor.local.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
+  "extends": "./api-extractor.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/<unscopedPackageName>/src/index.d.ts",
+  "compiler": {
+    /**
+     * This is a quickfix to make build:local work
+     * - @see https://github.com/microsoft/fluentui/issues/19360
+     * - config copied/mirrored from package tsconfig.json
+     */
+    "overrideTsconfig": {
+      "extends": "../../tsconfig.base.json",
+      "include": ["src"],
+      "compilerOptions": {
+        "target": "ES5",
+        "module": "CommonJS",
+        "lib": ["ES2016", "dom"],
+        "outDir": "dist",
+        "jsx": "react",
+        "declaration": true,
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "noUnusedLocals": true,
+        "preserveConstEnums": true,
+        "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"],
+        "baseUrl": ".",
+        "paths": {
+          "@fluentui/*": ["dist/*/src/index.d.ts"]
+        }
+      }
+    }
+  }
+}

packages/react-components/config/tests.js

@@ -0,0 +1 @@
+/** Jest test setup file. */

packages/react-components/jest.config.js

@@ -0,0 +1,21 @@
+// @ts-check
+
+/**
+ * @type {jest.InitialOptions}
+ */
+module.exports = {
+  displayName: 'react-components',
+  preset: '../../jest.preset.js',
+  globals: {
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.json',
+      diagnostics: false,
+    },
+  },
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  coverageDirectory: './coverage',
+  setupFilesAfterEnv: ['./config/tests.js'],
+  snapshotSerializers: ['@fluentui/jest-serializer-make-styles'],
+};

packages/react-components/package.json

@@ -13,15 +13,18 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
-    "bundle": "just-scripts bundle",
-    "bundle:storybook": "just-scripts storybook:build",
     "bundle-size": "bundle-size measure",
-    "chromatic": "npx [email protected] --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --build-script-name bundle:storybook",
+    "chromatic": "npx [email protected] --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --build-script-name build-storybook",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook"
+    "start": "yarn storybook",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-components/src && yarn docs",
+    "storybook": "start-storybook --port 3000 -s ./public",
+    "build-storybook": "build-storybook -s ./public -o ./dist/storybook",
+    "test": "jest"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.3.3",

packages/react-examples/src/react-components/FluentUIComponents/Introduction.stories.mdx → packages/react-components/src/Concepts/Introduction.stories.mdx

@@ -1,6 +1,4 @@
 import { Meta } from '@storybook/addon-docs';
-import banner from './fluentui-banner2.jpg';
-import './intro.css';
 
 <Meta title="Concepts/Introduction" />