From 18c3b050771bc5d0a9be97798022e537bf16ac92 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 21 Jul 2021 13:21:48 +0200 Subject: [PATCH 01/10] chore(react-components): migrate to new dx stage-1 --- jest.config.js | 1 + nx.json | 2 +- package.json | 4 +++ packages/react-components/.storybook/main.js | 25 +++++++++++++ .../react-components/.storybook/preview.js | 7 ++++ .../react-components/.storybook/tsconfig.json | 9 +++++ .../config/api-extractor.json | 1 + .../config/api-extractor.local.json | 33 ++++++++++++++++++ packages/react-components/config/tests.js | 1 + packages/react-components/jest.config.js | 21 +++++++++++ packages/react-components/package.json | 11 +++--- .../src/Concepts}/ChildWindow.stories.mdx | 0 .../src/Concepts}/Introduction.stories.mdx | 0 .../src/Concepts}/QuickStart.stories.mdx | 0 .../src/Concepts}/SSR.stories.mdx | 0 .../Concepts}/StylingComponents.stories.mdx | 0 .../src/Concepts}/fluentui-banner2.jpg | Bin .../src/Concepts}/intro.css | 0 .../src}/Migrations/Flex.Flex.stories.mdx | 2 +- .../src}/Migrations/Flex.FlexItem.stories.mdx | 2 +- .../src}/Migrations/Flex.Overview.stories.mdx | 0 .../src}/Migrations/Flex.Stack.stories.mdx | 2 +- .../Migrations/Flex.StackItem.stories.mdx | 2 +- .../src/Migrations/utils.stories.test.tsx} | 2 +- .../src/Migrations/utils.stories.tsx} | 0 packages/react-components/tsconfig.json | 21 +++++------ packages/react-examples/package.json | 1 - tsconfig.base.json | 3 +- workspace.json | 6 +++- yarn.lock | 16 ++++----- 30 files changed, 138 insertions(+), 34 deletions(-) create mode 100644 packages/react-components/.storybook/main.js create mode 100644 packages/react-components/.storybook/preview.js create mode 100644 packages/react-components/.storybook/tsconfig.json create mode 100644 packages/react-components/config/api-extractor.local.json create mode 100644 packages/react-components/config/tests.js create mode 100644 packages/react-components/jest.config.js rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/src/Concepts}/ChildWindow.stories.mdx (100%) rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/src/Concepts}/Introduction.stories.mdx (100%) rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/src/Concepts}/QuickStart.stories.mdx (100%) rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/src/Concepts}/SSR.stories.mdx (100%) rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/src/Concepts}/StylingComponents.stories.mdx (100%) rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/src/Concepts}/fluentui-banner2.jpg (100%) rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/src/Concepts}/intro.css (100%) rename packages/{react-examples/src/react-components => react-components/src}/Migrations/Flex.Flex.stories.mdx (99%) rename packages/{react-examples/src/react-components => react-components/src}/Migrations/Flex.FlexItem.stories.mdx (98%) rename packages/{react-examples/src/react-components => react-components/src}/Migrations/Flex.Overview.stories.mdx (100%) rename packages/{react-examples/src/react-components => react-components/src}/Migrations/Flex.Stack.stories.mdx (99%) rename packages/{react-examples/src/react-components => react-components/src}/Migrations/Flex.StackItem.stories.mdx (98%) rename packages/{react-examples/src/react-components/Migrations/utils.test.tsx => react-components/src/Migrations/utils.stories.test.tsx} (98%) rename packages/{react-examples/src/react-components/Migrations/utils.tsx => react-components/src/Migrations/utils.stories.tsx} (100%) diff --git a/jest.config.js b/jest.config.js index 0c4e691ac3015..56a7e22398046 100644 --- a/jest.config.js +++ b/jest.config.js @@ -34,6 +34,7 @@ module.exports = { '/packages/react-tooltip', '/packages/react-card', '/packages/react-checkbox', + '/packages/react-components', '/packages/react-storybook-addon', '/packages/react-switch', ], diff --git a/nx.json b/nx.json index b612a864371c4..37ecf930a594f 100644 --- a/nx.json +++ b/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": [] }, diff --git a/package.json b/package.json index fce0577c92d75..7eb91caa16a80 100644 --- a/package.json +++ b/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", diff --git a/packages/react-components/.storybook/main.js b/packages/react-components/.storybook/main.js new file mode 100644 index 0000000000000..a793966360124 --- /dev/null +++ b/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} */ ({ + 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} */ + const packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, `../package.json`), 'utf-8')); + + const dependencies = /** @type {Record} */ (packageJson.dependencies); + + return Object.keys(dependencies) + .filter(pkgName => pkgName.startsWith('@fluentui/')) + .map(pkgName => '../../' + pkgName.replace('@fluentui/', '') + '/src/**/*.stories.@(ts|tsx|mdx)'); +} diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js new file mode 100644 index 0000000000000..10fd98d02c945 --- /dev/null +++ b/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 }; diff --git a/packages/react-components/.storybook/tsconfig.json b/packages/react-components/.storybook/tsconfig.json new file mode 100644 index 0000000000000..3bd9adcd2ee05 --- /dev/null +++ b/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"] +} diff --git a/packages/react-components/config/api-extractor.json b/packages/react-components/config/api-extractor.json index c8406ab42ca3c..f890ae360b7f7 100644 --- a/packages/react-components/config/api-extractor.json +++ b/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" } diff --git a/packages/react-components/config/api-extractor.local.json b/packages/react-components/config/api-extractor.local.json new file mode 100644 index 0000000000000..3ea4a9cf91007 --- /dev/null +++ b/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": "/dist//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"] + } + } + } + } +} diff --git a/packages/react-components/config/tests.js b/packages/react-components/config/tests.js new file mode 100644 index 0000000000000..2e211ae9e2142 --- /dev/null +++ b/packages/react-components/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ diff --git a/packages/react-components/jest.config.js b/packages/react-components/jest.config.js new file mode 100644 index 0000000000000..1db951f1c997f --- /dev/null +++ b/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: '/tsconfig.json', + diagnostics: false, + }, + }, + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], + snapshotSerializers: ['@fluentui/jest-serializer-make-styles'], +}; diff --git a/packages/react-components/package.json b/packages/react-components/package.json index ad06ad78459dd..495017b6f309b 100644 --- a/packages/react-components/package.json +++ b/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 chromatic@5.6.3 --project-token $CHROMATIC_PROJECT_TOKEN --exit-zero-on-changes --build-script-name bundle:storybook", + "chromatic": "npx chromatic@5.6.3 --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", diff --git a/packages/react-examples/src/react-components/FluentUIComponents/ChildWindow.stories.mdx b/packages/react-components/src/Concepts/ChildWindow.stories.mdx similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/ChildWindow.stories.mdx rename to packages/react-components/src/Concepts/ChildWindow.stories.mdx diff --git a/packages/react-examples/src/react-components/FluentUIComponents/Introduction.stories.mdx b/packages/react-components/src/Concepts/Introduction.stories.mdx similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/Introduction.stories.mdx rename to packages/react-components/src/Concepts/Introduction.stories.mdx diff --git a/packages/react-examples/src/react-components/FluentUIComponents/QuickStart.stories.mdx b/packages/react-components/src/Concepts/QuickStart.stories.mdx similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/QuickStart.stories.mdx rename to packages/react-components/src/Concepts/QuickStart.stories.mdx diff --git a/packages/react-examples/src/react-components/FluentUIComponents/SSR.stories.mdx b/packages/react-components/src/Concepts/SSR.stories.mdx similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/SSR.stories.mdx rename to packages/react-components/src/Concepts/SSR.stories.mdx diff --git a/packages/react-examples/src/react-components/FluentUIComponents/StylingComponents.stories.mdx b/packages/react-components/src/Concepts/StylingComponents.stories.mdx similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/StylingComponents.stories.mdx rename to packages/react-components/src/Concepts/StylingComponents.stories.mdx diff --git a/packages/react-examples/src/react-components/FluentUIComponents/fluentui-banner2.jpg b/packages/react-components/src/Concepts/fluentui-banner2.jpg similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/fluentui-banner2.jpg rename to packages/react-components/src/Concepts/fluentui-banner2.jpg diff --git a/packages/react-examples/src/react-components/FluentUIComponents/intro.css b/packages/react-components/src/Concepts/intro.css similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/intro.css rename to packages/react-components/src/Concepts/intro.css diff --git a/packages/react-examples/src/react-components/Migrations/Flex.Flex.stories.mdx b/packages/react-components/src/Migrations/Flex.Flex.stories.mdx similarity index 99% rename from packages/react-examples/src/react-components/Migrations/Flex.Flex.stories.mdx rename to packages/react-components/src/Migrations/Flex.Flex.stories.mdx index e53f63a064296..3e7137236c582 100644 --- a/packages/react-examples/src/react-components/Migrations/Flex.Flex.stories.mdx +++ b/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'; diff --git a/packages/react-examples/src/react-components/Migrations/Flex.FlexItem.stories.mdx b/packages/react-components/src/Migrations/Flex.FlexItem.stories.mdx similarity index 98% rename from packages/react-examples/src/react-components/Migrations/Flex.FlexItem.stories.mdx rename to packages/react-components/src/Migrations/Flex.FlexItem.stories.mdx index e9ac0e9c06b39..5865e5f8b9a1c 100644 --- a/packages/react-examples/src/react-components/Migrations/Flex.FlexItem.stories.mdx +++ b/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'; diff --git a/packages/react-examples/src/react-components/Migrations/Flex.Overview.stories.mdx b/packages/react-components/src/Migrations/Flex.Overview.stories.mdx similarity index 100% rename from packages/react-examples/src/react-components/Migrations/Flex.Overview.stories.mdx rename to packages/react-components/src/Migrations/Flex.Overview.stories.mdx diff --git a/packages/react-examples/src/react-components/Migrations/Flex.Stack.stories.mdx b/packages/react-components/src/Migrations/Flex.Stack.stories.mdx similarity index 99% rename from packages/react-examples/src/react-components/Migrations/Flex.Stack.stories.mdx rename to packages/react-components/src/Migrations/Flex.Stack.stories.mdx index bcf7b3b41fa13..7157f317cc046 100644 --- a/packages/react-examples/src/react-components/Migrations/Flex.Stack.stories.mdx +++ b/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'; diff --git a/packages/react-examples/src/react-components/Migrations/Flex.StackItem.stories.mdx b/packages/react-components/src/Migrations/Flex.StackItem.stories.mdx similarity index 98% rename from packages/react-examples/src/react-components/Migrations/Flex.StackItem.stories.mdx rename to packages/react-components/src/Migrations/Flex.StackItem.stories.mdx index 64b51354953e9..ac99cfe64da70 100644 --- a/packages/react-examples/src/react-components/Migrations/Flex.StackItem.stories.mdx +++ b/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'; diff --git a/packages/react-examples/src/react-components/Migrations/utils.test.tsx b/packages/react-components/src/Migrations/utils.stories.test.tsx similarity index 98% rename from packages/react-examples/src/react-components/Migrations/utils.test.tsx rename to packages/react-components/src/Migrations/utils.stories.test.tsx index 003dc53ecae77..89ea9ab583f68 100644 --- a/packages/react-examples/src/react-components/Migrations/utils.test.tsx +++ b/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 { diff --git a/packages/react-examples/src/react-components/Migrations/utils.tsx b/packages/react-components/src/Migrations/utils.stories.tsx similarity index 100% rename from packages/react-examples/src/react-components/Migrations/utils.tsx rename to packages/react-components/src/Migrations/utils.stories.tsx diff --git a/packages/react-components/tsconfig.json b/packages/react-components/tsconfig.json index 12f7db5b1a1a6..c1b8c0c594c54 100644 --- a/packages/react-components/tsconfig.json +++ b/packages/react-components/tsconfig.json @@ -1,22 +1,17 @@ { + "extends": "../../tsconfig.base.json", + "include": ["src"], "compilerOptions": { - "baseUrl": ".", + "target": "ES5", + "module": "CommonJS", + "lib": ["ES2016", "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"] + } } diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index f02c898a1b8b4..cd5290dd69d12 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -42,7 +42,6 @@ "@fluentui/react": "^8.29.0", "@fluentui/react-cards": "^0.200.18", "@fluentui/react-charting": "^5.3.28", - "@fluentui/react-components": "^9.0.0-alpha.94", "@fluentui/react-docsite-components": "^8.3.17", "@fluentui/react-experiments": "^8.2.7", "@fluentui/react-file-type-icons": "^8.2.3", diff --git a/tsconfig.base.json b/tsconfig.base.json index b0f2baed5ebb5..010316d4f5cbd 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -47,7 +47,8 @@ "@fluentui/react-card": ["packages/react-card/src/index.ts"], "@fluentui/react-checkbox": ["packages/react-checkbox/src/index.ts"], "@fluentui/react-storybook-addon": ["packages/react-storybook-addon/src/index.ts"], - "@fluentui/react-switch": ["packages/react-switch/src/index.ts"] + "@fluentui/react-switch": ["packages/react-switch/src/index.ts"], + "@fluentui/react-components": ["packages/react-components/src/index.ts"] } }, "exclude": ["node_modules"] diff --git a/workspace.json b/workspace.json index 5dde3ea4afafd..090d9e728d7e9 100644 --- a/workspace.json +++ b/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": { diff --git a/yarn.lock b/yarn.lock index 0b6491196afdb..b72a882e0fe33 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5015,6 +5015,13 @@ dependencies: "@types/react" "*" +"@types/react-test-renderer@16.8.2", "@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" @@ -5022,13 +5029,6 @@ 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" @@ -21256,7 +21256,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== From 540bd14d2710ac0a2e074238efed12ee1cf7c522 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 9 Aug 2021 12:15:24 +0200 Subject: [PATCH 02/10] fix(react-components): make static assets work after migration --- packages/react-components/.storybook/preview.js | 3 +++ .../{src/Concepts => public}/fluentui-banner2.jpg | Bin .../{src/Concepts => public}/intro.css | 0 .../src/Concepts/Introduction.stories.mdx | 2 -- 4 files changed, 3 insertions(+), 2 deletions(-) rename packages/react-components/{src/Concepts => public}/fluentui-banner2.jpg (100%) rename packages/react-components/{src/Concepts => public}/intro.css (100%) diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js index 10fd98d02c945..91388855b28d6 100644 --- a/packages/react-components/.storybook/preview.js +++ b/packages/react-components/.storybook/preview.js @@ -1,5 +1,8 @@ import * as rootPreview from '../../../.storybook/preview'; +// load global styles +import '../public/intro.css'; + /** @type {typeof rootPreview.decorators} */ export const decorators = [...rootPreview.decorators]; diff --git a/packages/react-components/src/Concepts/fluentui-banner2.jpg b/packages/react-components/public/fluentui-banner2.jpg similarity index 100% rename from packages/react-components/src/Concepts/fluentui-banner2.jpg rename to packages/react-components/public/fluentui-banner2.jpg diff --git a/packages/react-components/src/Concepts/intro.css b/packages/react-components/public/intro.css similarity index 100% rename from packages/react-components/src/Concepts/intro.css rename to packages/react-components/public/intro.css diff --git a/packages/react-components/src/Concepts/Introduction.stories.mdx b/packages/react-components/src/Concepts/Introduction.stories.mdx index 93da20596f034..a1d9f3c52694b 100644 --- a/packages/react-components/src/Concepts/Introduction.stories.mdx +++ b/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'; From d92d9f34f9119a3e724b324f2b6d766de382d231 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 9 Aug 2021 13:38:48 +0200 Subject: [PATCH 03/10] ix(react-components): make manager UI render the same prior to migration --- .../.storybook/fluentuiTheme.js | 37 ++++++ .../.storybook/manager-head.html | 111 ++++++++++++++++++ .../react-components/.storybook/manager.js | 8 ++ packages/react-components/public/fluent.svg | 4 + 4 files changed, 160 insertions(+) create mode 100644 packages/react-components/.storybook/fluentuiTheme.js create mode 100644 packages/react-components/.storybook/manager-head.html create mode 100644 packages/react-components/.storybook/manager.js create mode 100644 packages/react-components/public/fluent.svg diff --git a/packages/react-components/.storybook/fluentuiTheme.js b/packages/react-components/.storybook/fluentuiTheme.js new file mode 100644 index 0000000000000..3a3734a15b71c --- /dev/null +++ b/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, +}); diff --git a/packages/react-components/.storybook/manager-head.html b/packages/react-components/.storybook/manager-head.html new file mode 100644 index 0000000000000..ddb942d88f8a1 --- /dev/null +++ b/packages/react-components/.storybook/manager-head.html @@ -0,0 +1,111 @@ + + + + + + + diff --git a/packages/react-components/.storybook/manager.js b/packages/react-components/.storybook/manager.js new file mode 100644 index 0000000000000..c719d5626404c --- /dev/null +++ b/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, +}); diff --git a/packages/react-components/public/fluent.svg b/packages/react-components/public/fluent.svg new file mode 100644 index 0000000000000..ff84463589af9 --- /dev/null +++ b/packages/react-components/public/fluent.svg @@ -0,0 +1,4 @@ + + + + From cd8de949eeb35dbd9d5e3d2d9298311ecf1f0791 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 9 Aug 2021 14:13:17 +0200 Subject: [PATCH 04/10] fix(react-components): sort stories the same way prior to migration --- .../react-components/.storybook/preview.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js index 91388855b28d6..9050b61385157 100644 --- a/packages/react-components/.storybook/preview.js +++ b/packages/react-components/.storybook/preview.js @@ -7,4 +7,20 @@ import '../public/intro.css'; export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ -export const parameters = { ...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', + ], + }, + }, +}; From 683aae8361e0b3bfb56d4059866037f47a5ed845 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 9 Aug 2021 14:14:01 +0200 Subject: [PATCH 05/10] chore(typings): add *.svg to global ts extensions --- typings/custom-global/index.d.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/typings/custom-global/index.d.ts b/typings/custom-global/index.d.ts index 3d5847fed6b6b..4f7d60c6f7601 100644 --- a/typings/custom-global/index.d.ts +++ b/typings/custom-global/index.d.ts @@ -5,6 +5,10 @@ declare module '*.scss' { const styles: { [className: string]: string }; export default styles; } +declare module '*.svg' { + const svgPath: string; + export default svgPath; +} // These declarations are meant to represent the parts of Map/WeakMap/Set that exist in IE 11. // Therefore, some functionality (such as constructor parameters) is intentionally missing. From 9d03df2946f29af18414848a4e02fda48c675a72 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Mon, 9 Aug 2021 14:20:38 +0200 Subject: [PATCH 06/10] Change files --- ...ct-components-9ea0436e-2e31-479f-8532-b1338b04729c.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-components-9ea0436e-2e31-479f-8532-b1338b04729c.json diff --git a/change/@fluentui-react-components-9ea0436e-2e31-479f-8532-b1338b04729c.json b/change/@fluentui-react-components-9ea0436e-2e31-479f-8532-b1338b04729c.json new file mode 100644 index 0000000000000..7ab886f5a4dfc --- /dev/null +++ b/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": "martinhochel@microsoft.com", + "dependentChangeType": "none" +} From 4aee03f835b89a409ba3605b4a33d73fa27ad65d Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Tue, 10 Aug 2021 19:29:37 +0200 Subject: [PATCH 07/10] fix(scripts): resolve api-extractor execution issue within packages with new DX --- scripts/tasks/api-extractor.ts | 82 +++++++++++++++++++++++++++++++++- 1 file changed, 80 insertions(+), 2 deletions(-) diff --git a/scripts/tasks/api-extractor.ts b/scripts/tasks/api-extractor.ts index cd535ecbbdf39..80c555ae8d15a 100644 --- a/scripts/tasks/api-extractor.ts +++ b/scripts/tasks/api-extractor.ts @@ -1,6 +1,10 @@ +import fs from 'fs'; import * as glob from 'glob'; import * as path from 'path'; -import { apiExtractorVerifyTask, task, series } from 'just-scripts'; +import jju from 'jju'; +import { apiExtractorVerifyTask, task, series, resolveCwd, logger, TscTaskOptions, condition } from 'just-scripts'; + +const noop = () => {}; const apiExtractorConfigs = glob .sync(path.join(process.cwd(), 'config/api-extractor*.json')) @@ -14,10 +18,84 @@ export function apiExtractor() { return apiExtractorConfigs.length ? series( ...apiExtractorConfigs.map(([configPath, configName]) => { + // note we have `"strictNullChecks": false,` turned off - so from TS point of view this always returns API 🚨 + const overrideApi = overrideExtractorConfigForPackagesWithTsPathAliases({ + apiExtractorConfigPath: configPath, + tsConfigPath: resolveCwd('./tsconfig.json'), + }); + + const shouldExecOverrideTasks = () => overrideApi !== null; + + const cleanupOverrides = overrideApi ? () => overrideApi.resetConfig() : () => noop; + + task('api-extractor:override-config', () => { + if (overrideApi) { + overrideApi.overrideConfig(); + } + }); + task('api-extractor:cleanup-override-config', () => { + cleanupOverrides(); + }); + const taskName = `api-extractor:${configName}`; - task(taskName, apiExtractorVerifyTask({ configJsonFilePath: configPath, localBuild })); + task( + taskName, + series( + condition('api-extractor:override-config', shouldExecOverrideTasks), + apiExtractorVerifyTask({ configJsonFilePath: configPath, localBuild }), + condition('api-extractor:cleanup-override-config', shouldExecOverrideTasks), + ), + ); + return taskName; }), ) : 'no-op'; } + +interface TsConfig { + extends?: string; + + /** + * typescript doesn't provide a correct type for the compiler options file + * -> (typescript.CompilerOptions has enum values instead of raw options in some cases) + */ + compilerOptions: TscTaskOptions; + include?: string[]; + exclude?: string[]; +} + +function overrideExtractorConfigForPackagesWithTsPathAliases(options: { + tsConfigPath: string; + apiExtractorConfigPath: string; +}) { + const tsConfig: TsConfig = jju.parse(fs.readFileSync(options.tsConfigPath, 'utf-8')); + const shouldOverrideConfig = Boolean(tsConfig.extends); + + if (!shouldOverrideConfig) { + return null; + } + + logger.info(`📣 API-EXTRACTOR: package is using TS path aliases. Overriding ts compiler settings for api-extractor.`); + + const originalContent = fs.readFileSync(options.apiExtractorConfigPath, 'utf-8'); + const apiExtractorConfigOriginal = jju.parse(originalContent, { mode: 'json' }); + + tsConfig.compilerOptions.baseUrl = '.'; + apiExtractorConfigOriginal.compiler = { + overrideTsconfig: tsConfig, + }; + + const api = { + overrideConfig: () => { + const newContent = jju.update(originalContent, apiExtractorConfigOriginal, { mode: 'json', indent: 2 }); + + fs.writeFileSync(options.apiExtractorConfigPath, newContent, 'utf-8'); + }, + resetConfig: () => { + fs.writeFileSync(options.apiExtractorConfigPath, originalContent, 'utf-8'); + }, + }; + + return api; +} From b7caa404da4f8bdc4cfa5057514d18b6d1302c60 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 11 Aug 2021 13:44:47 +0200 Subject: [PATCH 08/10] ci: make react-components storybook build after migration to new dx --- azure-pipelines.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/azure-pipelines.yml b/azure-pipelines.yml index bfe3c1bea9e1c..dd9684cf0fc19 100644 --- a/azure-pipelines.yml +++ b/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 From aff33a2e6656f4d68a9a208485ef188f60d667bb Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 11 Aug 2021 14:49:11 +0200 Subject: [PATCH 09/10] chore: add all teams as owners of react-components suite --- .github/CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6a8afe9168917..d6a64998f906f 100644 --- a/.github/CODEOWNERS +++ b/.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 From 1eb466ef39656e6f0ba5b0b34030b22797e94b3c Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Thu, 19 Aug 2021 20:38:27 +0200 Subject: [PATCH 10/10] fixup! fix(scripts): resolve api-extractor execution issue within packages with new DX --- scripts/tasks/api-extractor.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/scripts/tasks/api-extractor.ts b/scripts/tasks/api-extractor.ts index 80c555ae8d15a..d7ff1e7de337d 100644 --- a/scripts/tasks/api-extractor.ts +++ b/scripts/tasks/api-extractor.ts @@ -4,8 +4,6 @@ import * as path from 'path'; import jju from 'jju'; import { apiExtractorVerifyTask, task, series, resolveCwd, logger, TscTaskOptions, condition } from 'just-scripts'; -const noop = () => {}; - const apiExtractorConfigs = glob .sync(path.join(process.cwd(), 'config/api-extractor*.json')) .map(configPath => [configPath, configPath.replace(/.*\bapi-extractor(?:\.(.*))?\.json$/, '$1') || 'default']) @@ -26,15 +24,15 @@ export function apiExtractor() { const shouldExecOverrideTasks = () => overrideApi !== null; - const cleanupOverrides = overrideApi ? () => overrideApi.resetConfig() : () => noop; - task('api-extractor:override-config', () => { if (overrideApi) { overrideApi.overrideConfig(); } }); task('api-extractor:cleanup-override-config', () => { - cleanupOverrides(); + if (overrideApi) { + overrideApi.resetConfig(); + } }); const taskName = `api-extractor:${configName}`;