From 8299f41189596ce854e14fa5adac8ae452cb9867 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Nov 2021 12:42:27 +0100 Subject: [PATCH 01/13] chore: migrate @fluentui/react-components --- packages/react-components/.babelrc.json | 3 ++ packages/react-components/.npmignore | 1 - packages/react-components/.storybook/main.js | 17 +++------ .../react-components/.storybook/preview.js | 37 +------------------ .../react-components/.storybook/tsconfig.json | 7 ++-- .../config/api-extractor.local.json | 30 +-------------- packages/react-components/jest.config.js | 2 +- packages/react-components/package.json | 10 +++-- .../AccessibilityScenarios/Menu.stories.tsx | 7 ---- packages/react-components/tsconfig.json | 28 +++++++++----- packages/react-components/tsconfig.lib.json | 12 ++++++ packages/react-components/tsconfig.spec.json | 9 +++++ 12 files changed, 61 insertions(+), 102 deletions(-) create mode 100644 packages/react-components/.babelrc.json create mode 100644 packages/react-components/tsconfig.lib.json create mode 100644 packages/react-components/tsconfig.spec.json diff --git a/packages/react-components/.babelrc.json b/packages/react-components/.babelrc.json new file mode 100644 index 0000000000000..b51a5457ced10 --- /dev/null +++ b/packages/react-components/.babelrc.json @@ -0,0 +1,3 @@ +{ + "plugins": ["module:@fluentui/babel-make-styles", "annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/react-components/.npmignore b/packages/react-components/.npmignore index fa2d3a7f5111c..e719afb921bc9 100644 --- a/packages/react-components/.npmignore +++ b/packages/react-components/.npmignore @@ -1,4 +1,3 @@ -.cache/ .storybook/ .vscode/ bundle-size/ diff --git a/packages/react-components/.storybook/main.js b/packages/react-components/.storybook/main.js index 77e48491c3a06..18a60b265c2cf 100644 --- a/packages/react-components/.storybook/main.js +++ b/packages/react-components/.storybook/main.js @@ -1,19 +1,14 @@ const rootMain = require('../../../.storybook/main'); -const utils = require('./main.utils'); - -module.exports = /** @type {Pick} */ ({ - stories: [ - ...rootMain.stories, - '../src/**/*.stories.mdx', - '../src/**/*.stories.@(ts|tsx)', - ...utils.getVnextStories(), - ], - addons: [...rootMain.addons, '@fluentui/react-storybook-addon'], +module.exports = /** @type {Omit} */ ({ + ...rootMain, + stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'], + addons: [...rootMain.addons], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; + // add your own webpack tweaks if needed + return localConfig; }, - previewHead: rootMain.previewHead, }); diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js index 336d89e35cd48..10fd98d02c945 100644 --- a/packages/react-components/.storybook/preview.js +++ b/packages/react-components/.storybook/preview.js @@ -1,42 +1,7 @@ import * as rootPreview from '../../../.storybook/preview'; -import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories'; -import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories'; - -// load global styles -import '../public/intro.css'; - -/** @type {NonNullable} */ -const options = { - storySort: { - method: 'alphabetical', - /** - * @see https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories - */ - order: [ - 'Concepts', - [ - 'Introduction', - 'Developer', - ['Quick Start', 'Migrating from @fluentui/react v8', 'Styling Components', 'Positioning Components'], - ], - 'Theme', - 'Components', - 'Migrations', - ], - }, -}; /** @type {typeof rootPreview.decorators} */ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ -export const parameters = { - ...rootPreview.parameters, - docs: { - ...rootPreview.parameters.docs, - container: FluentDocsContainer, - page: FluentDocsPage, - // container: FluentDocsContainer, - }, - options, -}; +export const parameters = { ...rootPreview.parameters }; diff --git a/packages/react-components/.storybook/tsconfig.json b/packages/react-components/.storybook/tsconfig.json index 3bd9adcd2ee05..29aa16f2f178f 100644 --- a/packages/react-components/.storybook/tsconfig.json +++ b/packages/react-components/.storybook/tsconfig.json @@ -1,9 +1,10 @@ { "extends": "../tsconfig.json", "compilerOptions": { + "outDir": "", "allowJs": true, - "checkJs": true + "checkJs": true, + "types": ["static-assets", "environment", "inline-style-expand-shorthand", "storybook__addons"] }, - "exclude": ["../**/*.test.ts", "../**/*.test.js", "../**/*.test.tsx", "../**/*.test.jsx"], - "include": ["../src/**/*", "*.js"] + "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] } diff --git a/packages/react-components/config/api-extractor.local.json b/packages/react-components/config/api-extractor.local.json index 3ea4a9cf91007..7974a129e8a33 100644 --- a/packages/react-components/config/api-extractor.local.json +++ b/packages/react-components/config/api-extractor.local.json @@ -1,33 +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", - "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"] - } - } - } - } + "mainEntryPointFilePath": "/dist/packages//src/index.d.ts" } diff --git a/packages/react-components/jest.config.js b/packages/react-components/jest.config.js index 1db951f1c997f..2bef8ca51098d 100644 --- a/packages/react-components/jest.config.js +++ b/packages/react-components/jest.config.js @@ -8,7 +8,7 @@ module.exports = { preset: '../../jest.preset.js', globals: { 'ts-jest': { - tsConfig: '/tsconfig.json', + tsConfig: '/tsconfig.spec.json', diagnostics: false, }, }, diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 71f945ac7244d..6e23e8c3e3457 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -21,11 +21,12 @@ "lint": "just-scripts lint", "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:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-components/src && yarn docs", + "storybook": "start-storybook", "storybook:docs": "start-storybook --port 3000 -s ./public --docs --no-manager-cache", "build-storybook": "build-storybook -s ./public -o ./dist/storybook --docs", - "test": "jest" + "test": "jest", + "type-check": "tsc -b tsconfig.json" }, "devDependencies": { "@fluentui/eslint-plugin": "*", @@ -34,7 +35,8 @@ "@types/react": "16.9.42", "@types/react-dom": "16.9.10", "react": "16.8.6", - "react-dom": "16.8.6" + "react-dom": "16.8.6", + "@fluentui/babel-make-styles": "9.0.0-beta.3" }, "dependencies": { "@fluentui/react-accordion": "9.0.0-beta.4", diff --git a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx index 9a530dbeb4927..736bc451ddd92 100644 --- a/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx +++ b/packages/react-components/src/AccessibilityScenarios/Menu.stories.tsx @@ -1,12 +1,5 @@ import * as React from 'react'; - -// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982 -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore import { Button } from '@fluentui/react-button'; -// https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982 -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore import { Menu, MenuTrigger, diff --git a/packages/react-components/tsconfig.json b/packages/react-components/tsconfig.json index 534e2b72108bd..affceae1828ae 100644 --- a/packages/react-components/tsconfig.json +++ b/packages/react-components/tsconfig.json @@ -1,17 +1,25 @@ { "extends": "../../tsconfig.base.json", - "include": ["src"], "compilerOptions": { "target": "ES2019", - "module": "CommonJS", - "lib": ["ES2019", "DOM"], - "outDir": "dist", - "jsx": "react", - "declaration": true, - "experimentalDecorators": true, + "noEmit": true, + "isolatedModules": true, "importHelpers": true, + "jsx": "react", "noUnusedLocals": true, - "preserveConstEnums": true, - "types": ["jest", "custom-global", "inline-style-expand-shorthand", "storybook__addons"] - } + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + }, + { + "path": "./.storybook/tsconfig.json" + } + ] } diff --git a/packages/react-components/tsconfig.lib.json b/packages/react-components/tsconfig.lib.json new file mode 100644 index 0000000000000..51f5726b71c68 --- /dev/null +++ b/packages/react-components/tsconfig.lib.json @@ -0,0 +1,12 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "dom"], + "outDir": "dist", + "declaration": true, + "types": ["static-assets", "environment", "inline-style-expand-shorthand"] + }, + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx"], + "include": ["./src/**/*.ts", "./src/**/*.tsx"] +} diff --git a/packages/react-components/tsconfig.spec.json b/packages/react-components/tsconfig.spec.json new file mode 100644 index 0000000000000..28fa5226de420 --- /dev/null +++ b/packages/react-components/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node", "inline-style-expand-shorthand"] + }, + "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] +} From 00da79083b2bac6209544439bd2ff1fbac787720 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Nov 2021 12:42:54 +0100 Subject: [PATCH 02/13] Change files --- ...ct-components-6fb4276e-8a87-493f-933b-0e128524e932.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-components-6fb4276e-8a87-493f-933b-0e128524e932.json diff --git a/change/@fluentui-react-components-6fb4276e-8a87-493f-933b-0e128524e932.json b/change/@fluentui-react-components-6fb4276e-8a87-493f-933b-0e128524e932.json new file mode 100644 index 0000000000000..14009feb9d8a9 --- /dev/null +++ b/change/@fluentui-react-components-6fb4276e-8a87-493f-933b-0e128524e932.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "update tooling configs", + "packageName": "@fluentui/react-components", + "email": "olfedias@microsoft.com", + "dependentChangeType": "none" +} From 4e7815321228296e27218bda3e5e2ce9782d1c0f Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Nov 2021 12:44:50 +0100 Subject: [PATCH 03/13] restore script --- packages/react-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 6e23e8c3e3457..225947af5f3ad 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -22,7 +22,7 @@ "start": "yarn storybook", "docs": "api-extractor run --config=config/api-extractor.local.json --local", "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-components/src && yarn docs", - "storybook": "start-storybook", + "storybook": "start-storybook --port 3000 -s ./public", "storybook:docs": "start-storybook --port 3000 -s ./public --docs --no-manager-cache", "build-storybook": "build-storybook -s ./public -o ./dist/storybook --docs", "test": "jest", From f2f5f263f47f56eecb7ebb49760d4aa6dbf74eae Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Nov 2021 12:50:26 +0100 Subject: [PATCH 04/13] restore changes --- .../react-components/.storybook/preview.js | 37 ++++++++++++++++++- 1 file changed, 36 insertions(+), 1 deletion(-) diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js index 10fd98d02c945..336d89e35cd48 100644 --- a/packages/react-components/.storybook/preview.js +++ b/packages/react-components/.storybook/preview.js @@ -1,7 +1,42 @@ import * as rootPreview from '../../../.storybook/preview'; +import { FluentDocsContainer } from '../src/DocsComponents/FluentDocsContainer.stories'; +import { FluentDocsPage } from '../src/DocsComponents/FluentDocsPage.stories'; + +// load global styles +import '../public/intro.css'; + +/** @type {NonNullable} */ +const options = { + storySort: { + method: 'alphabetical', + /** + * @see https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories + */ + order: [ + 'Concepts', + [ + 'Introduction', + 'Developer', + ['Quick Start', 'Migrating from @fluentui/react v8', 'Styling Components', 'Positioning Components'], + ], + 'Theme', + 'Components', + 'Migrations', + ], + }, +}; /** @type {typeof rootPreview.decorators} */ export const decorators = [...rootPreview.decorators]; /** @type {typeof rootPreview.parameters} */ -export const parameters = { ...rootPreview.parameters }; +export const parameters = { + ...rootPreview.parameters, + docs: { + ...rootPreview.parameters.docs, + container: FluentDocsContainer, + page: FluentDocsPage, + // container: FluentDocsContainer, + }, + options, +}; From f4359ddcf7200614530f72537ddb278769135fd3 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Nov 2021 12:54:14 +0100 Subject: [PATCH 05/13] fix config --- .../config/api-extractor.local.json | 30 ++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/react-components/config/api-extractor.local.json b/packages/react-components/config/api-extractor.local.json index 7974a129e8a33..e0f5f7739cf7f 100644 --- a/packages/react-components/config/api-extractor.local.json +++ b/packages/react-components/config/api-extractor.local.json @@ -1,5 +1,33 @@ { "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", "extends": "./api-extractor.json", - "mainEntryPointFilePath": "/dist/packages//src/index.d.ts" + "mainEntryPointFilePath": "/dist/packages//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"] + } + } + } + } } From 7ccebc6894e5486ccb8f024f6c45307b3842fbaf Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Nov 2021 13:15:22 +0100 Subject: [PATCH 06/13] update configs to include both JS & TS --- packages/react-components/tsconfig.json | 3 ++- packages/react-components/tsconfig.lib.json | 17 +++++++++++++++-- packages/react-components/tsconfig.spec.json | 13 ++++++++++++- 3 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/react-components/tsconfig.json b/packages/react-components/tsconfig.json index affceae1828ae..56ca820086267 100644 --- a/packages/react-components/tsconfig.json +++ b/packages/react-components/tsconfig.json @@ -7,7 +7,8 @@ "importHelpers": true, "jsx": "react", "noUnusedLocals": true, - "preserveConstEnums": true + "allowJs": true, + "checkJs": true }, "include": [], "files": [], diff --git a/packages/react-components/tsconfig.lib.json b/packages/react-components/tsconfig.lib.json index 51f5726b71c68..78c613a07e5b1 100644 --- a/packages/react-components/tsconfig.lib.json +++ b/packages/react-components/tsconfig.lib.json @@ -7,6 +7,19 @@ "declaration": true, "types": ["static-assets", "environment", "inline-style-expand-shorthand"] }, - "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx"], - "include": ["./src/**/*.ts", "./src/**/*.tsx"] + "exclude": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.test.ts", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.spec.jsx", + "**/*.test.js", + "**/*.test.jsx", + "**/*.stories.ts", + "**/*.stories.tsx", + "**/*.stories.js", + "**/*.stories.jsx" + ], + "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js", "./src/**/*.jsx"] } diff --git a/packages/react-components/tsconfig.spec.json b/packages/react-components/tsconfig.spec.json index 28fa5226de420..13d17c2dad1cf 100644 --- a/packages/react-components/tsconfig.spec.json +++ b/packages/react-components/tsconfig.spec.json @@ -5,5 +5,16 @@ "outDir": "dist", "types": ["jest", "node", "inline-style-expand-shorthand"] }, - "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] + "include": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.test.ts", + "**/*.test.tsx", + "**/*.d.ts", + "**/*.spec.js", + "**/*.spec.jsx", + "**/*.test.js", + "**/*.test.jsx", + "**/*.d.ts" + ] } From cbecc87e6e36f3853c8e7408d6389b603781384f Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Nov 2021 13:46:34 +0100 Subject: [PATCH 07/13] fix typings errors --- packages/react-components/.storybook/preview.js | 1 - packages/react-components/.storybook/tsconfig.json | 10 ++++++++++ .../PositioningPopperImperativeHandle.stories.tsx | 13 ++++++++++--- packages/react-storybook-addon/src/index.ts | 3 ++- typings/storybook__addons/index.d.ts | 5 +++++ 5 files changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/react-components/.storybook/preview.js b/packages/react-components/.storybook/preview.js index 336d89e35cd48..3dac862afc841 100644 --- a/packages/react-components/.storybook/preview.js +++ b/packages/react-components/.storybook/preview.js @@ -36,7 +36,6 @@ export const parameters = { ...rootPreview.parameters.docs, container: FluentDocsContainer, page: FluentDocsPage, - // container: FluentDocsContainer, }, options, }; diff --git a/packages/react-components/.storybook/tsconfig.json b/packages/react-components/.storybook/tsconfig.json index 29aa16f2f178f..96189e0e960ae 100644 --- a/packages/react-components/.storybook/tsconfig.json +++ b/packages/react-components/.storybook/tsconfig.json @@ -6,5 +6,15 @@ "checkJs": true, "types": ["static-assets", "environment", "inline-style-expand-shorthand", "storybook__addons"] }, + "exclude": [ + "**/*.spec.ts", + "**/*.spec.tsx", + "**/*.test.ts", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.spec.jsx", + "**/*.test.js", + "**/*.test.jsx" + ], "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] } diff --git a/packages/react-components/src/Concepts/Positioning/PositioningPopperImperativeHandle.stories.tsx b/packages/react-components/src/Concepts/Positioning/PositioningPopperImperativeHandle.stories.tsx index 44cef86f4bdc5..821f7926f0dbb 100644 --- a/packages/react-components/src/Concepts/Positioning/PositioningPopperImperativeHandle.stories.tsx +++ b/packages/react-components/src/Concepts/Positioning/PositioningPopperImperativeHandle.stories.tsx @@ -6,13 +6,16 @@ import { PositioningProps } from '@fluentui/react-positioning'; export const PopperImperativeHandle = () => { const [loading, setLoading] = React.useState(true); const popperRef: PositioningProps['popperRef'] = React.useRef({ updatePosition: () => null }); - const timeoutRef = React.useRef(0); + const timeoutRef = React.useRef>(); const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => { if (!data.open) { setLoading(true); } else { - clearTimeout(timeoutRef.current); + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + timeoutRef.current = setTimeout(() => setLoading(false), 1000); } }; @@ -24,7 +27,11 @@ export const PopperImperativeHandle = () => { }, [loading]); React.useEffect(() => { - return () => clearTimeout(timeoutRef.current); + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + }; }); return ( diff --git a/packages/react-storybook-addon/src/index.ts b/packages/react-storybook-addon/src/index.ts index 3da679ee45e46..93a947fc12a13 100644 --- a/packages/react-storybook-addon/src/index.ts +++ b/packages/react-storybook-addon/src/index.ts @@ -1,3 +1,4 @@ export type { FluentGlobals, FluentStoryContext } from './hooks'; -export { themes, ThemeIds } from './theme'; +export { themes } from './theme'; +export type { ThemeIds } from './theme'; export { THEME_ID } from './constants'; diff --git a/typings/storybook__addons/index.d.ts b/typings/storybook__addons/index.d.ts index 255af90e4e66b..9be9102e226c7 100644 --- a/typings/storybook__addons/index.d.ts +++ b/typings/storybook__addons/index.d.ts @@ -5,6 +5,7 @@ // TypeScript Version: 3.1 import { ViewMode } from '@storybook/addons'; +import * as React from 'react'; declare module '@storybook/addons' { // PUBLIC API - extended definitions @@ -35,6 +36,10 @@ declare module '@storybook/addons' { */ excludeDecorators: boolean; }; + + container: React.ComponentType; + page: React.ComponentType; + /** * https://github.com/storybookjs/storybook/tree/next/addons/docs/react#inline-stories */ From 13cb126f7552efd90796d60d6a24df8bf9c33ed4 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Nov 2021 17:06:05 +0100 Subject: [PATCH 08/13] fix SB config --- packages/react-components/.storybook/main.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react-components/.storybook/main.js b/packages/react-components/.storybook/main.js index 18a60b265c2cf..63b66e7805a12 100644 --- a/packages/react-components/.storybook/main.js +++ b/packages/react-components/.storybook/main.js @@ -1,9 +1,15 @@ const rootMain = require('../../../.storybook/main'); +const utils = require('./main.utils'); module.exports = /** @type {Omit} */ ({ ...rootMain, - stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'], - addons: [...rootMain.addons], + stories: [ + ...rootMain.stories, + '../src/**/*.stories.mdx', + '../src/**/*.stories.@(ts|tsx)', + ...utils.getVnextStories(), + ], + addons: [...rootMain.addons, '@fluentui/react-storybook-addon'], webpackFinal: (config, options) => { const localConfig = { ...rootMain.webpackFinal(config, options) }; From 00472382545a2e996f57233324dabbc3cc2df9e4 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 26 Nov 2021 14:57:11 +0100 Subject: [PATCH 09/13] bump pkg version --- packages/react-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 065e51f8aaaed..f27420a704198 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -36,7 +36,7 @@ "@types/react-dom": "16.9.10", "react": "16.8.6", "react-dom": "16.8.6", - "@fluentui/babel-make-styles": "9.0.0-beta.3" + "@fluentui/babel-make-styles": "9.0.0-beta.4" }, "dependencies": { "@fluentui/react-accordion": "9.0.0-beta.5", From f972dcf10ea4547bb7bee33ab34c8b2c85a0cf2e Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 26 Nov 2021 15:06:04 +0100 Subject: [PATCH 10/13] Apply suggestions from code review Co-authored-by: Martin Hochel --- packages/react-components/.storybook/tsconfig.json | 4 ---- packages/react-components/tsconfig.lib.json | 8 +------- packages/react-components/tsconfig.spec.json | 5 ----- 3 files changed, 1 insertion(+), 16 deletions(-) diff --git a/packages/react-components/.storybook/tsconfig.json b/packages/react-components/.storybook/tsconfig.json index 96189e0e960ae..c72241cf1174c 100644 --- a/packages/react-components/.storybook/tsconfig.json +++ b/packages/react-components/.storybook/tsconfig.json @@ -11,10 +11,6 @@ "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", - "**/*.spec.js", - "**/*.spec.jsx", - "**/*.test.js", - "**/*.test.jsx" ], "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] } diff --git a/packages/react-components/tsconfig.lib.json b/packages/react-components/tsconfig.lib.json index 78c613a07e5b1..1a6a6a6a7b710 100644 --- a/packages/react-components/tsconfig.lib.json +++ b/packages/react-components/tsconfig.lib.json @@ -12,14 +12,8 @@ "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", - "**/*.spec.js", - "**/*.spec.jsx", - "**/*.test.js", - "**/*.test.jsx", "**/*.stories.ts", "**/*.stories.tsx", - "**/*.stories.js", - "**/*.stories.jsx" ], - "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js", "./src/**/*.jsx"] + "include": ["./src/**/*.ts", "./src/**/*.tsx"] } diff --git a/packages/react-components/tsconfig.spec.json b/packages/react-components/tsconfig.spec.json index 13d17c2dad1cf..5f13a76102c49 100644 --- a/packages/react-components/tsconfig.spec.json +++ b/packages/react-components/tsconfig.spec.json @@ -11,10 +11,5 @@ "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts", - "**/*.spec.js", - "**/*.spec.jsx", - "**/*.test.js", - "**/*.test.jsx", - "**/*.d.ts" ] } From 135f8478aebdc67c8e4f5cb5ab2baed828f59d63 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 26 Nov 2021 15:18:53 +0100 Subject: [PATCH 11/13] fix fmt --- packages/react-components/.storybook/tsconfig.json | 7 +------ packages/react-components/tsconfig.lib.json | 9 +-------- packages/react-components/tsconfig.spec.json | 8 +------- 3 files changed, 3 insertions(+), 21 deletions(-) diff --git a/packages/react-components/.storybook/tsconfig.json b/packages/react-components/.storybook/tsconfig.json index c72241cf1174c..fa9efbcc14b51 100644 --- a/packages/react-components/.storybook/tsconfig.json +++ b/packages/react-components/.storybook/tsconfig.json @@ -6,11 +6,6 @@ "checkJs": true, "types": ["static-assets", "environment", "inline-style-expand-shorthand", "storybook__addons"] }, - "exclude": [ - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.test.ts", - "**/*.test.tsx", - ], + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] } diff --git a/packages/react-components/tsconfig.lib.json b/packages/react-components/tsconfig.lib.json index 1a6a6a6a7b710..51f5726b71c68 100644 --- a/packages/react-components/tsconfig.lib.json +++ b/packages/react-components/tsconfig.lib.json @@ -7,13 +7,6 @@ "declaration": true, "types": ["static-assets", "environment", "inline-style-expand-shorthand"] }, - "exclude": [ - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.test.ts", - "**/*.test.tsx", - "**/*.stories.ts", - "**/*.stories.tsx", - ], + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.ts", "**/*.stories.tsx"], "include": ["./src/**/*.ts", "./src/**/*.tsx"] } diff --git a/packages/react-components/tsconfig.spec.json b/packages/react-components/tsconfig.spec.json index 5f13a76102c49..28fa5226de420 100644 --- a/packages/react-components/tsconfig.spec.json +++ b/packages/react-components/tsconfig.spec.json @@ -5,11 +5,5 @@ "outDir": "dist", "types": ["jest", "node", "inline-style-expand-shorthand"] }, - "include": [ - "**/*.spec.ts", - "**/*.spec.tsx", - "**/*.test.ts", - "**/*.test.tsx", - "**/*.d.ts", - ] + "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] } From 95fe527145b9bffef762ef83a67bdb80a8cb0f83 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 26 Nov 2021 16:39:57 +0100 Subject: [PATCH 12/13] run generator once more --- packages/react-components/.storybook/tsconfig.json | 1 - packages/react-components/tsconfig.json | 3 +-- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react-components/.storybook/tsconfig.json b/packages/react-components/.storybook/tsconfig.json index fa9efbcc14b51..29aa16f2f178f 100644 --- a/packages/react-components/.storybook/tsconfig.json +++ b/packages/react-components/.storybook/tsconfig.json @@ -6,6 +6,5 @@ "checkJs": true, "types": ["static-assets", "environment", "inline-style-expand-shorthand", "storybook__addons"] }, - "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], "include": ["../src/**/*.stories.ts", "../src/**/*.stories.tsx", "*.js"] } diff --git a/packages/react-components/tsconfig.json b/packages/react-components/tsconfig.json index 56ca820086267..affceae1828ae 100644 --- a/packages/react-components/tsconfig.json +++ b/packages/react-components/tsconfig.json @@ -7,8 +7,7 @@ "importHelpers": true, "jsx": "react", "noUnusedLocals": true, - "allowJs": true, - "checkJs": true + "preserveConstEnums": true }, "include": [], "files": [], From c24a859b91c728aa3a8b88eeeddc12d4c96ac01f Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Fri, 26 Nov 2021 17:05:26 +0100 Subject: [PATCH 13/13] apply review suggestions --- .../.storybook/main.utils.test.js | 1 + .../PositioningPopperImperativeHandle.stories.tsx | 15 ++++----------- 2 files changed, 5 insertions(+), 11 deletions(-) diff --git a/packages/react-components/.storybook/main.utils.test.js b/packages/react-components/.storybook/main.utils.test.js index baf22cbe2dae9..0f5b1bc89bad5 100644 --- a/packages/react-components/.storybook/main.utils.test.js +++ b/packages/react-components/.storybook/main.utils.test.js @@ -1,3 +1,4 @@ +/// const utils = require('./main.utils'); describe(`main utils`, () => { diff --git a/packages/react-components/src/Concepts/Positioning/PositioningPopperImperativeHandle.stories.tsx b/packages/react-components/src/Concepts/Positioning/PositioningPopperImperativeHandle.stories.tsx index 821f7926f0dbb..ef6ccac2c9ec7 100644 --- a/packages/react-components/src/Concepts/Positioning/PositioningPopperImperativeHandle.stories.tsx +++ b/packages/react-components/src/Concepts/Positioning/PositioningPopperImperativeHandle.stories.tsx @@ -6,17 +6,14 @@ import { PositioningProps } from '@fluentui/react-positioning'; export const PopperImperativeHandle = () => { const [loading, setLoading] = React.useState(true); const popperRef: PositioningProps['popperRef'] = React.useRef({ updatePosition: () => null }); - const timeoutRef = React.useRef>(); + const timeoutRef = React.useRef(0); const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => { if (!data.open) { setLoading(true); } else { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - - timeoutRef.current = setTimeout(() => setLoading(false), 1000); + clearTimeout(timeoutRef.current); + timeoutRef.current = window.setTimeout(() => setLoading(false), 1000); } }; @@ -27,11 +24,7 @@ export const PopperImperativeHandle = () => { }, [loading]); React.useEffect(() => { - return () => { - if (timeoutRef.current) { - clearTimeout(timeoutRef.current); - } - }; + return () => clearTimeout(timeoutRef.current); }); return (