From ef0f778ee5358ff99504c676d028625635a396fd Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Thu, 19 Aug 2021 21:17:53 +0200 Subject: [PATCH] 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 | 2 +- azure-pipelines.yml | 4 + ...-9ea0436e-2e31-479f-8532-b1338b04729c.json | 7 ++ jest.config.js | 1 + nx.json | 2 +- package.json | 4 + .../.storybook/fluentuiTheme.js | 37 ++++++ packages/react-components/.storybook/main.js | 25 ++++ .../.storybook/manager-head.html | 111 ++++++++++++++++++ .../react-components/.storybook/manager.js | 8 ++ .../react-components/.storybook/preview.js | 26 ++++ .../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 +- packages/react-components/public/fluent.svg | 4 + .../public}/fluentui-banner2.jpg | Bin .../public}/intro.css | 0 .../src/Concepts}/ChildWindow.stories.mdx | 0 .../src/Concepts}/Introduction.stories.mdx | 2 - .../src/Concepts}/QuickStart.stories.mdx | 0 .../src/Concepts}/SSR.stories.mdx | 0 .../Concepts}/StylingComponents.stories.mdx | 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 - scripts/tasks/api-extractor.ts | 80 ++++++++++++- tsconfig.base.json | 3 +- typings/custom-global/index.d.ts | 4 + workspace.json | 6 +- yarn.lock | 16 +-- 39 files changed, 411 insertions(+), 39 deletions(-) create mode 100644 change/@fluentui-react-components-9ea0436e-2e31-479f-8532-b1338b04729c.json create mode 100644 packages/react-components/.storybook/fluentuiTheme.js create mode 100644 packages/react-components/.storybook/main.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/.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 create mode 100644 packages/react-components/public/fluent.svg rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/public}/fluentui-banner2.jpg (100%) rename packages/{react-examples/src/react-components/FluentUIComponents => react-components/public}/intro.css (100%) 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 (94%) 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 => 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/.github/CODEOWNERS b/.github/CODEOWNERS index 6a8afe9168917d..d6a64998f906f0 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 diff --git a/azure-pipelines.yml b/azure-pipelines.yml index bfe3c1bea9e1c9..dd9684cf0fc19e 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 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 00000000000000..7ab886f5a4dfcb --- /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" +} diff --git a/jest.config.js b/jest.config.js index 0c4e691ac3015c..56a7e22398046c 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 b612a864371c4e..37ecf930a594f4 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 fce0577c92d755..7eb91caa16a804 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/fluentuiTheme.js b/packages/react-components/.storybook/fluentuiTheme.js new file mode 100644 index 00000000000000..3a3734a15b71cd --- /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/main.js b/packages/react-components/.storybook/main.js new file mode 100644 index 00000000000000..a793966360124b --- /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/manager-head.html b/packages/react-components/.storybook/manager-head.html new file mode 100644 index 00000000000000..ddb942d88f8a18 --- /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 00000000000000..c719d5626404c0 --- /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/.storybook/preview.js b/packages/react-components/.storybook/preview.js new file mode 100644 index 00000000000000..9050b61385157a --- /dev/null +++ b/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', + ], + }, + }, +}; diff --git a/packages/react-components/.storybook/tsconfig.json b/packages/react-components/.storybook/tsconfig.json new file mode 100644 index 00000000000000..3bd9adcd2ee05e --- /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 c8406ab42ca3cc..f890ae360b7f7f 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 00000000000000..3ea4a9cf910071 --- /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 00000000000000..2e211ae9e21420 --- /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 00000000000000..1db951f1c997f6 --- /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 ad06ad78459ddd..495017b6f309b4 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-components/public/fluent.svg b/packages/react-components/public/fluent.svg new file mode 100644 index 00000000000000..ff84463589af93 --- /dev/null +++ b/packages/react-components/public/fluent.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/react-examples/src/react-components/FluentUIComponents/fluentui-banner2.jpg b/packages/react-components/public/fluentui-banner2.jpg similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/fluentui-banner2.jpg rename to packages/react-components/public/fluentui-banner2.jpg diff --git a/packages/react-examples/src/react-components/FluentUIComponents/intro.css b/packages/react-components/public/intro.css similarity index 100% rename from packages/react-examples/src/react-components/FluentUIComponents/intro.css rename to packages/react-components/public/intro.css 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 94% rename from packages/react-examples/src/react-components/FluentUIComponents/Introduction.stories.mdx rename to packages/react-components/src/Concepts/Introduction.stories.mdx index 93da20596f034b..a1d9f3c52694bd 100644 --- a/packages/react-examples/src/react-components/FluentUIComponents/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'; 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/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 e53f63a0642962..3e7137236c5826 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 e9ac0e9c06b39c..5865e5f8b9a1c5 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 bcf7b3b41fa132..7157f317cc0467 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 64b51354953e98..ac99cfe64da70a 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 003dc53ecae77c..89ea9ab583f68b 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 12f7db5b1a1a67..c1b8c0c594c544 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 f02c898a1b8b46..cd5290dd69d122 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/scripts/tasks/api-extractor.ts b/scripts/tasks/api-extractor.ts index cd535ecbbdf395..d7ff1e7de337db 100644 --- a/scripts/tasks/api-extractor.ts +++ b/scripts/tasks/api-extractor.ts @@ -1,6 +1,8 @@ +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 apiExtractorConfigs = glob .sync(path.join(process.cwd(), 'config/api-extractor*.json')) @@ -14,10 +16,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; + + task('api-extractor:override-config', () => { + if (overrideApi) { + overrideApi.overrideConfig(); + } + }); + task('api-extractor:cleanup-override-config', () => { + if (overrideApi) { + overrideApi.resetConfig(); + } + }); + 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; +} diff --git a/tsconfig.base.json b/tsconfig.base.json index b0f2baed5ebb5f..010316d4f5cbde 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/typings/custom-global/index.d.ts b/typings/custom-global/index.d.ts index 3d5847fed6b6b3..4f7d60c6f76013 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. diff --git a/workspace.json b/workspace.json index 5dde3ea4afafdb..090d9e728d7e9f 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 0b6491196afdbf..b72a882e0fe336 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==