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

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',
   ],
 };

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

@@ -129,6 +129,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",
@@ -198,6 +199,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",

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/preview.js

@@ -0,0 +1,7 @@
+import * as rootPreview from '../../../.storybook/preview';
+
+/** @type {typeof rootPreview.decorators} */
+export const decorators = [...rootPreview.decorators];
+
+/** @type {typeof rootPreview.parameters} */
+export const parameters = { ...rootPreview.parameters };

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,5 @@
+{
+  "$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"
+}

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",
+    "build-storybook": "build-storybook",
+    "test": "jest"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "^1.3.3",

packages/react-examples/src/react-components/Migrations/Flex.Flex.stories.mdx → packages/react-components/src/Migrations/Flex.Flex.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-import { CodeComparison, CodeExample } from './utils';
+import { CodeComparison, CodeExample } from './utils.stories';
 
 <Meta title="Migrations/Flex/Flex" />
 

packages/react-examples/src/react-components/Migrations/Flex.FlexItem.stories.mdx → packages/react-components/src/Migrations/Flex.FlexItem.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-import { CodeComparison, CodeExample } from './utils';
+import { CodeComparison, CodeExample } from './utils.stories';
 
 <Meta title="Migrations/Flex/Flex.Item" />
 

packages/react-examples/src/react-components/Migrations/Flex.Stack.stories.mdx → packages/react-components/src/Migrations/Flex.Stack.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-import { CodeComparison, CodeExample } from './utils';
+import { CodeComparison, CodeExample } from './utils.stories';
 
 <Meta title="Migrations/Flex/Stack" />
 

packages/react-examples/src/react-components/Migrations/Flex.StackItem.stories.mdx → packages/react-components/src/Migrations/Flex.StackItem.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-import { CodeComparison, CodeExample } from './utils';
+import { CodeComparison, CodeExample } from './utils.stories';
 
 <Meta title="Migrations/Flex/Stack.Item" />
 

packages/react-examples/src/react-components/Migrations/utils.test.tsx → packages/react-components/src/Migrations/utils.stories.test.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { Source } from '@storybook/addon-docs';
 import { createRenderer } from 'react-test-renderer/shallow';
-import { CodeExample } from './utils';
+import { CodeExample } from './utils.stories';
 
 function mockMDXSourceCodeBlock(source: string) {
   return {

packages/react-components/tsconfig.json

@@ -1,22 +1,17 @@
 {
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"],
   "compilerOptions": {
-    "baseUrl": ".",
+    "target": "ES5",
+    "module": "CommonJS",
+    "lib": ["es5", "dom"],
     "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
     "jsx": "react",
     "declaration": true,
-    "sourceMap": true,
+    "experimentalDecorators": true,
     "importHelpers": true,
     "noUnusedLocals": true,
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "moduleResolution": "node",
     "preserveConstEnums": true,
-    "lib": ["es5", "dom"],
-    "skipLibCheck": true,
-    "typeRoots": ["../../node_modules/@types", "../../typings"],
-    "types": ["custom-global"]
-  },
-  "include": ["src"]
+    "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"]
+  }
 }

packages/react-examples/package.json

@@ -42,7 +42,6 @@
     "@fluentui/react": "^8.27.1",
     "@fluentui/react-cards": "^0.200.13",
     "@fluentui/react-charting": "^5.3.23",
-    "@fluentui/react-components": "^9.0.0-alpha.89",
     "@fluentui/react-docsite-components": "^8.3.12",
     "@fluentui/react-experiments": "^8.2.2",
     "@fluentui/react-file-type-icons": "^8.2.2",

tsconfig.base.json

@@ -46,6 +46,7 @@
       "@fluentui/react-avatar": ["packages/react-avatar/src/index.ts"],
       "@fluentui/react-card": ["packages/react-card/src/index.ts"],
       "@fluentui/react-checkbox": ["packages/react-checkbox/src/index.ts"],
+      "@fluentui/react-components": ["packages/react-components/src/index.ts"],
       "@fluentui/react-storybook-addon": ["packages/react-storybook-addon/src/index.ts"]
     }
   },

workspace.json

@@ -131,7 +131,11 @@
       "projectType": "library",
       "sourceRoot": "packages/react-checkbox/src"
     },
-    "@fluentui/react-components": { "root": "packages/react-components", "projectType": "library" },
+    "@fluentui/react-components": {
+      "root": "packages/react-components",
+      "projectType": "library",
+      "sourceRoot": "packages/react-components/src"
+    },
     "@fluentui/react-compose": { "root": "packages/react-compose", "projectType": "library" },
     "@fluentui/react-conformance": { "root": "packages/react-conformance", "projectType": "library" },
     "@fluentui/react-context-selector": {

yarn.lock

@@ -5015,20 +5015,20 @@
   dependencies:
     "@types/react" "*"
 
+"@types/[email protected]", "@types/react-test-renderer@^16.0.0":
+  version "16.8.2"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.8.2.tgz#ad544b5571ebfc5f182c320376f1431a2b725c5e"
+  integrity sha512-cm42QR9S9V3aOxLh7Fh7PUqQ8oSfSdnSni30T7TiTmlKvE6aUlo+LhQAzjnZBPriD9vYmgG8MXI8UDK4Nfb7gg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-test-renderer@>=16.9.0":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.0.tgz#9be47b375eeb906fced37049e67284a438d56620"
   integrity sha512-nvw+F81OmyzpyIE1S0xWpLonLUZCMewslPuA8BtjSKc5XEbn8zEQBXS7KuOLHTNnSOEM2Pum50gHOoZ62tqTRg==
   dependencies:
     "@types/react" "*"
 
-"@types/react-test-renderer@^16.0.0":
-  version "16.8.2"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.8.2.tgz#ad544b5571ebfc5f182c320376f1431a2b725c5e"
-  integrity sha512-cm42QR9S9V3aOxLh7Fh7PUqQ8oSfSdnSni30T7TiTmlKvE6aUlo+LhQAzjnZBPriD9vYmgG8MXI8UDK4Nfb7gg==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-virtualized@^9.21.8":
   version "9.21.8"
   resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.8.tgz#dc0150a75fd6e42f33729886463ece04d03367ea"
@@ -21261,7 +21261,7 @@ react-table@^7.1.0:
   dependencies:
     "@scarf/scarf" "^1.0.4"
 
-react-test-renderer@^16.0.0-0, react-test-renderer@^16.3.0:
+react-test-renderer@16.8.6, react-test-renderer@^16.0.0-0, react-test-renderer@^16.3.0:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.8.6.tgz#188d8029b8c39c786f998aa3efd3ffe7642d5ba1"
   integrity sha512-H2srzU5IWYT6cZXof6AhUcx/wEyJddQ8l7cLM/F7gDXYyPr4oq+vCIxJYXVGhId1J706sqziAjuOEjyNkfgoEw==