From 32670516e8be28461ccb9e8cab91a08179ed6d79 Mon Sep 17 00:00:00 2001 From: Martin Hochel Date: Wed, 21 Jul 2021 13:21:48 +0200 Subject: [PATCH] chore(react-components): migrate to new dx stage-1 --- jest.config.js | 1 + nx.json | 2 +- package.json | 2 ++ 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 | 5 ++++ 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, 108 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 4e5dbc04283d0d..2cca94ec2e99d5 100644 --- a/jest.config.js +++ b/jest.config.js @@ -32,5 +32,6 @@ module.exports = { '/packages/react-avatar', '/packages/react-shared-contexts', '/packages/react-tooltip', + '/packages/react-components', ], }; diff --git a/nx.json b/nx.json index 72b95c5e74c785..3e912f4be8316f 100644 --- a/nx.json +++ b/nx.json @@ -82,7 +82,7 @@ "@fluentui/react-cards": { "implicitDependencies": [] }, "@fluentui/react-charting": { "implicitDependencies": [] }, "@fluentui/react-checkbox": { "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 75acc87a1104d1..f613d73d0075f9 100644 --- a/package.json +++ b/package.json @@ -111,6 +111,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", @@ -177,6 +178,7 @@ "pretty-bytes": "5.6.0", "raw-loader": "4.0.2", "react-app-polyfill": "2.0.0", + "react-test-renderer": "16.8.6", "sass-loader": "10.1.1", "satisfied": "^1.1.1", "semver": "^6.2.0", 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/preview.js b/packages/react-components/.storybook/preview.js new file mode 100644 index 00000000000000..10fd98d02c9454 --- /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 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..c2ea401c1c3685 --- /dev/null +++ b/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": "/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 ddab516a61bf59..3035a469056ecf 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", + "build-storybook": "build-storybook", + "test": "jest" }, "devDependencies": { "@fluentui/eslint-plugin": "^1.3.2", 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 95d75056b86d68..d518432e74fa2c 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/blocks'; -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 73bbb44fb84d4d..f25488a9424c4c 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/blocks'; -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 9a09ee85fbee40..4c61f62d5c7952 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/blocks'; -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 2d86ec3390c329..dcb65963ee8e62 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/blocks'; -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 6e6aad6754e0ba..af58338078cd02 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/blocks'; 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..5a977f51e4d876 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": ["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"] + } } diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index 4cdc628daa806b..1454108eec002d 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -43,7 +43,6 @@ "@fluentui/react-cards": "^0.200.2", "@fluentui/react-charting": "^5.3.12", "@fluentui/react-checkbox": "^9.0.0-alpha.12", - "@fluentui/react-components": "^9.0.0-alpha.81", "@fluentui/react-docsite-components": "^8.3.1", "@fluentui/react-experiments": "^8.1.43", "@fluentui/react-file-type-icons": "^8.2.0", diff --git a/tsconfig.base.json b/tsconfig.base.json index d89e441256ba55..7f8c6d15bf2536 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -43,7 +43,8 @@ "@fluentui/keyboard-keys": ["packages/keyboard-keys/src/index.ts"], "@fluentui/react-slider": ["packages/react-slider/src/index.ts"], "@fluentui/make-styles-webpack-loader": ["packages/make-styles-webpack-loader/src/index.ts"], - "@fluentui/react-avatar": ["packages/react-avatar/src/index.ts"] + "@fluentui/react-avatar": ["packages/react-avatar/src/index.ts"], + "@fluentui/react-components": ["packages/react-components/src/index.ts"] } }, "exclude": ["node_modules"] diff --git a/workspace.json b/workspace.json index 2d0b3d279192f4..00a2efd9ee90c2 100644 --- a/workspace.json +++ b/workspace.json @@ -123,7 +123,11 @@ "@fluentui/react-cards": { "root": "packages/react-cards", "projectType": "library" }, "@fluentui/react-charting": { "root": "packages/react-charting", "projectType": "library" }, "@fluentui/react-checkbox": { "root": "packages/react-checkbox", "projectType": "library" }, - "@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 a66e928eb9819c..594712b28818ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5087,6 +5087,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" @@ -5094,13 +5101,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-textarea-autosize@^4.3.3": version "4.3.5" resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de" @@ -22244,7 +22244,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==