From e2360defc46ab144907bcd01b12e76fe35c4edbf Mon Sep 17 00:00:00 2001 From: Tringa Krasniqi Date: Wed, 21 Jul 2021 10:43:31 +0200 Subject: [PATCH] react-tooltip: Migration to new DX (#18977) * react-tooltip migration to new DX * Added change files for tooltip --- ...-fe5e1552-a9ff-4fac-a344-450a37376e82.json | 7 +++++ jest.config.js | 1 + nx.json | 2 +- packages/react-examples/package.json | 1 - packages/react-tooltip/.storybook/main.js | 11 ++++++++ packages/react-tooltip/.storybook/preview.js | 7 +++++ .../react-tooltip/.storybook/tsconfig.json | 9 +++++++ .../react-tooltip/config/api-extractor.json | 1 + .../config/api-extractor.local.json | 5 ++++ packages/react-tooltip/jest.config.js | 26 ++++++++++++++----- packages/react-tooltip/package.json | 9 ++++--- .../src}/Tooltip.stories.tsx | 7 ++++- packages/react-tooltip/tsconfig.json | 21 ++++++--------- workspace.json | 6 ++++- 14 files changed, 85 insertions(+), 28 deletions(-) create mode 100644 change/@fluentui-react-tooltip-fe5e1552-a9ff-4fac-a344-450a37376e82.json create mode 100644 packages/react-tooltip/.storybook/main.js create mode 100644 packages/react-tooltip/.storybook/preview.js create mode 100644 packages/react-tooltip/.storybook/tsconfig.json create mode 100644 packages/react-tooltip/config/api-extractor.local.json rename packages/{react-examples/src/react-tooltip/Tooltip => react-tooltip/src}/Tooltip.stories.tsx (98%) diff --git a/change/@fluentui-react-tooltip-fe5e1552-a9ff-4fac-a344-450a37376e82.json b/change/@fluentui-react-tooltip-fe5e1552-a9ff-4fac-a344-450a37376e82.json new file mode 100644 index 00000000000000..ff06a7f4e615b4 --- /dev/null +++ b/change/@fluentui-react-tooltip-fe5e1552-a9ff-4fac-a344-450a37376e82.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "react-tooltip migration to new DX", + "packageName": "@fluentui/react-tooltip", + "email": "tkrasniqi@microsoft.com", + "dependentChangeType": "none" +} diff --git a/jest.config.js b/jest.config.js index ead345b12cba4e..4e5dbc04283d0d 100644 --- a/jest.config.js +++ b/jest.config.js @@ -31,5 +31,6 @@ module.exports = { '/packages/make-styles-webpack-loader', '/packages/react-avatar', '/packages/react-shared-contexts', + '/packages/react-tooltip', ], }; diff --git a/nx.json b/nx.json index 1c3f53143feb35..72b95c5e74c785 100644 --- a/nx.json +++ b/nx.json @@ -113,7 +113,7 @@ "@fluentui/react-text": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, "@fluentui/react-theme": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, "@fluentui/react-toggle": { "implicitDependencies": [] }, - "@fluentui/react-tooltip": { "implicitDependencies": [] }, + "@fluentui/react-tooltip": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, "@fluentui/react-utilities": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, "@fluentui/react-window-provider": { "implicitDependencies": [] }, "@fluentui/scheme-utilities": { "implicitDependencies": [] }, diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index 9de4e0fb1124d8..4cdc628daa806b 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -56,7 +56,6 @@ "@fluentui/react-tabs": "^1.0.0-beta.128", "@fluentui/react-theme": "^9.0.0-alpha.17", "@fluentui/react-toggle": "^1.0.0-beta.126", - "@fluentui/react-tooltip": "^9.0.0-alpha.58", "@fluentui/react-utilities": "^9.0.0-alpha.33", "@fluentui/scheme-utilities": "^8.1.4", "@fluentui/style-utilities": "^8.2.0", diff --git a/packages/react-tooltip/.storybook/main.js b/packages/react-tooltip/.storybook/main.js new file mode 100644 index 00000000000000..f47245f2d07f01 --- /dev/null +++ b/packages/react-tooltip/.storybook/main.js @@ -0,0 +1,11 @@ +const rootMain = require('../../../.storybook/main'); + +module.exports = /** @type {Pick} */ ({ + stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'], + addons: [...rootMain.addons], + webpackFinal: (config, options) => { + const localConfig = { ...rootMain.webpackFinal(config, options) }; + + return localConfig; + }, +}); diff --git a/packages/react-tooltip/.storybook/preview.js b/packages/react-tooltip/.storybook/preview.js new file mode 100644 index 00000000000000..10fd98d02c9454 --- /dev/null +++ b/packages/react-tooltip/.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-tooltip/.storybook/tsconfig.json b/packages/react-tooltip/.storybook/tsconfig.json new file mode 100644 index 00000000000000..3bd9adcd2ee05e --- /dev/null +++ b/packages/react-tooltip/.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-tooltip/config/api-extractor.json b/packages/react-tooltip/config/api-extractor.json index c8406ab42ca3cc..f890ae360b7f7f 100644 --- a/packages/react-tooltip/config/api-extractor.json +++ b/packages/react-tooltip/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-tooltip/config/api-extractor.local.json b/packages/react-tooltip/config/api-extractor.local.json new file mode 100644 index 00000000000000..c2ea401c1c3685 --- /dev/null +++ b/packages/react-tooltip/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-tooltip/jest.config.js b/packages/react-tooltip/jest.config.js index c2a9e205df8e6d..b588701ac9b217 100644 --- a/packages/react-tooltip/jest.config.js +++ b/packages/react-tooltip/jest.config.js @@ -1,9 +1,21 @@ -const { createConfig } = require('@fluentui/scripts/jest/jest-resources'); -const path = require('path'); +// @ts-check -const config = createConfig({ - setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], +/** + * @type {jest.InitialOptions} + */ +module.exports = { + displayName: 'react-tooltip', + 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'], -}); - -module.exports = config; +}; diff --git a/packages/react-tooltip/package.json b/packages/react-tooltip/package.json index e2524ebd0d864b..0ac2f6e8910f35 100644 --- a/packages/react-tooltip/package.json +++ b/packages/react-tooltip/package.json @@ -18,10 +18,11 @@ "code-style": "just-scripts code-style", "just": "just-scripts", "lint": "just-scripts lint", - "start": "just-scripts dev:storybook", - "start-test": "just-scripts jest-watch", - "test": "just-scripts test", - "update-snapshots": "just-scripts jest -u" + "start": "yarn storybook", + "test": "jest", + "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-tooltip/src && yarn docs", + "storybook": "start-storybook" }, "devDependencies": { "@fluentui/babel-make-styles": "^9.0.0-alpha.28", diff --git a/packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx b/packages/react-tooltip/src/Tooltip.stories.tsx similarity index 98% rename from packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx rename to packages/react-tooltip/src/Tooltip.stories.tsx index 7b5fa566fa81bb..13d823f6c6b22d 100644 --- a/packages/react-examples/src/react-tooltip/Tooltip/Tooltip.stories.tsx +++ b/packages/react-tooltip/src/Tooltip.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Tooltip } from '@fluentui/react-tooltip'; +import { Tooltip } from './index'; import { makeStyles } from '@fluentui/react-make-styles'; const useStyles = makeStyles({ @@ -166,3 +166,8 @@ export const OnlyIfTruncated = () => { ); }; + +export default { + title: 'Components/Tooltip', + component: Tooltip, +}; diff --git a/packages/react-tooltip/tsconfig.json b/packages/react-tooltip/tsconfig.json index 0a88d158924adf..5a977f51e4d876 100644 --- a/packages/react-tooltip/tsconfig.json +++ b/packages/react-tooltip/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": ["jest", "custom-global"] - }, - "include": ["src"] + "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"] + } } diff --git a/workspace.json b/workspace.json index 0fed4a24452145..2d0b3d279192f4 100644 --- a/workspace.json +++ b/workspace.json @@ -210,7 +210,11 @@ "sourceRoot": "packages/react-theme/src" }, "@fluentui/react-toggle": { "root": "packages/react-toggle", "projectType": "library" }, - "@fluentui/react-tooltip": { "root": "packages/react-tooltip", "projectType": "library" }, + "@fluentui/react-tooltip": { + "root": "packages/react-tooltip", + "projectType": "library", + "sourceRoot": "packages/react-tooltip/src" + }, "@fluentui/react-utilities": { "root": "packages/react-utilities", "projectType": "library",