From b94492a891df45f75e11fb178fd282cbefdc0f7e Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 23 Jun 2021 20:28:45 -0700 Subject: [PATCH 1/7] migrate to new dx --- jest.config.js | 1 + nx.json | 2 +- packages/react-examples/package.json | 1 - packages/react-make-styles/.storybook/main.js | 11 +++++++++ .../react-make-styles/.storybook/preview.js | 3 +++ .../.storybook/tsconfig.json | 9 +++++++ .../config/api-extractor.json | 1 + .../config/api-extractor.local.json | 5 ++++ packages/react-make-styles/jest.config.js | 24 +++++++++++++++---- packages/react-make-styles/package.json | 8 ++++--- .../src}/Basic.stories.tsx | 7 +++++- .../src}/RTL.stories.tsx | 7 +++++- packages/react-make-styles/tsconfig.json | 19 ++++++--------- workspace.json | 6 ++++- 14 files changed, 80 insertions(+), 24 deletions(-) create mode 100644 packages/react-make-styles/.storybook/main.js create mode 100644 packages/react-make-styles/.storybook/preview.js create mode 100644 packages/react-make-styles/.storybook/tsconfig.json create mode 100644 packages/react-make-styles/config/api-extractor.local.json rename packages/{react-examples/src/react-make-styles/Basic => react-make-styles/src}/Basic.stories.tsx (95%) rename packages/{react-examples/src/react-make-styles/RTL => react-make-styles/src}/RTL.stories.tsx (95%) diff --git a/jest.config.js b/jest.config.js index 7c6f7abf320f21..67038356b4a367 100644 --- a/jest.config.js +++ b/jest.config.js @@ -11,5 +11,6 @@ module.exports = { '/packages/react-positioning', '/packages/react-link', '/packages/react-divider', + '/packages/react-make-styles', ], }; diff --git a/nx.json b/nx.json index 19afc7ebca7322..2769ab10f79b84 100644 --- a/nx.json +++ b/nx.json @@ -101,7 +101,7 @@ "@fluentui/react-image": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, "@fluentui/react-input": { "implicitDependencies": [] }, "@fluentui/react-link": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, - "@fluentui/react-make-styles": { "implicitDependencies": [] }, + "@fluentui/react-make-styles": { "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, "@fluentui/react-menu": { "tags": ["vNext"], "implicitDependencies": [] }, "@fluentui/react-monaco-editor": { "implicitDependencies": [] }, "@fluentui/react-portal": { "tags": ["vNext"], "implicitDependencies": [] }, diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index 303603c3e72352..ff77baddaa857c 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -54,7 +54,6 @@ "@fluentui/react-icons-mdl2": "^1.1.3", "@fluentui/react-label": "^9.0.0-alpha.9", "@fluentui/react-link": "^9.0.0-alpha.48", - "@fluentui/react-make-styles": "^9.0.0-alpha.42", "@fluentui/react-menu": "^9.0.0-alpha.40", "@fluentui/react-provider": "^9.0.0-alpha.47", "@fluentui/react-shared-contexts": "^9.0.0-alpha.15", diff --git a/packages/react-make-styles/.storybook/main.js b/packages/react-make-styles/.storybook/main.js new file mode 100644 index 00000000000000..f47245f2d07f01 --- /dev/null +++ b/packages/react-make-styles/.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-make-styles/.storybook/preview.js b/packages/react-make-styles/.storybook/preview.js new file mode 100644 index 00000000000000..b52409294c3304 --- /dev/null +++ b/packages/react-make-styles/.storybook/preview.js @@ -0,0 +1,3 @@ +import * as rootPreview from '../../../.storybook/preview'; + +export const decorators = [...rootPreview.decorators]; diff --git a/packages/react-make-styles/.storybook/tsconfig.json b/packages/react-make-styles/.storybook/tsconfig.json new file mode 100644 index 00000000000000..3bd9adcd2ee05e --- /dev/null +++ b/packages/react-make-styles/.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-make-styles/config/api-extractor.json b/packages/react-make-styles/config/api-extractor.json index c8406ab42ca3cc..f890ae360b7f7f 100644 --- a/packages/react-make-styles/config/api-extractor.json +++ b/packages/react-make-styles/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-make-styles/config/api-extractor.local.json b/packages/react-make-styles/config/api-extractor.local.json new file mode 100644 index 00000000000000..c2ea401c1c3685 --- /dev/null +++ b/packages/react-make-styles/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-make-styles/jest.config.js b/packages/react-make-styles/jest.config.js index 2226738a452a68..1a85aa307a6e66 100644 --- a/packages/react-make-styles/jest.config.js +++ b/packages/react-make-styles/jest.config.js @@ -1,5 +1,21 @@ -const { createConfig } = require('@fluentui/scripts/jest/jest-resources'); +// @ts-check -const config = createConfig(); - -module.exports = config; +/** + * @type {jest.InitialOptions} + */ +module.exports = { + displayName: 'react-make-styles', + 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-make-styles/package.json b/packages/react-make-styles/package.json index b32b2fc47e6831..01ea30c6f3dd92 100644 --- a/packages/react-make-styles/package.json +++ b/packages/react-make-styles/package.json @@ -18,9 +18,11 @@ "code-style": "just-scripts code-style", "just": "just-scripts", "lint": "just-scripts lint", - "test": "just-scripts test", - "start": "just-scripts dev:storybook", - "start-test": "just-scripts jest-watch" + "test": "jest", + "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-make-styles/src && yarn docs", + "storybook": "start-storybook" }, "devDependencies": { "@fluentui/eslint-plugin": "^1.3.1", diff --git a/packages/react-examples/src/react-make-styles/Basic/Basic.stories.tsx b/packages/react-make-styles/src/Basic.stories.tsx similarity index 95% rename from packages/react-examples/src/react-make-styles/Basic/Basic.stories.tsx rename to packages/react-make-styles/src/Basic.stories.tsx index 8382fb77755b37..0e3736a82ac7b7 100644 --- a/packages/react-examples/src/react-make-styles/Basic/Basic.stories.tsx +++ b/packages/react-make-styles/src/Basic.stories.tsx @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses } from '@fluentui/react-make-styles'; +import { makeStyles, mergeClasses } from './index'; import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme, teamsLightTheme } from '@fluentui/react-theme'; import * as React from 'react'; @@ -92,3 +92,8 @@ export const Frame = () => ( )} ); + +export default { + title: 'Components/Basic', + component: Basic, +}; diff --git a/packages/react-examples/src/react-make-styles/RTL/RTL.stories.tsx b/packages/react-make-styles/src/RTL.stories.tsx similarity index 95% rename from packages/react-examples/src/react-make-styles/RTL/RTL.stories.tsx rename to packages/react-make-styles/src/RTL.stories.tsx index 3e25203088ed6c..d5998a9dc781e3 100644 --- a/packages/react-examples/src/react-make-styles/RTL/RTL.stories.tsx +++ b/packages/react-make-styles/src/RTL.stories.tsx @@ -1,4 +1,4 @@ -import { makeStyles, mergeClasses } from '@fluentui/react-make-styles'; +import { makeStyles, mergeClasses } from './index'; import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme } from '@fluentui/react-theme'; import * as React from 'react'; @@ -87,3 +87,8 @@ export const Nested = () => ( ); + +export default { + title: 'Components/RTL', + component: RTL, +}; diff --git a/packages/react-make-styles/tsconfig.json b/packages/react-make-styles/tsconfig.json index a3ff72129341c5..1259d048631bd2 100644 --- a/packages/react-make-styles/tsconfig.json +++ b/packages/react-make-styles/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"], - "typeRoots": ["../../node_modules/@types", "../../typings"], - "types": ["custom-global", "jest"] - }, - "include": ["src"] + "types": ["jest", "custom-global", "inline-style-expand-shorthand"] + } } diff --git a/workspace.json b/workspace.json index 5c0ec598d9c49c..88ff3212c689f4 100644 --- a/workspace.json +++ b/workspace.json @@ -132,7 +132,11 @@ "projectType": "library", "sourceRoot": "packages/react-link/src" }, - "@fluentui/react-make-styles": { "root": "packages/react-make-styles", "projectType": "library" }, + "@fluentui/react-make-styles": { + "root": "packages/react-make-styles", + "projectType": "library", + "sourceRoot": "packages/react-make-styles/src" + }, "@fluentui/react-menu": { "root": "packages/react-menu", "projectType": "library", From c8a597ed026661c178e2171b9b275ad9972b203a Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Wed, 23 Jun 2021 20:29:18 -0700 Subject: [PATCH 2/7] Change files --- ...eact-examples-8474c864-aca4-4d2a-b6f0-215b1da91886.json | 7 +++++++ ...t-make-styles-e3ca26e1-8f64-4740-8ca9-b13472c35b96.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-examples-8474c864-aca4-4d2a-b6f0-215b1da91886.json create mode 100644 change/@fluentui-react-make-styles-e3ca26e1-8f64-4740-8ca9-b13472c35b96.json diff --git a/change/@fluentui-react-examples-8474c864-aca4-4d2a-b6f0-215b1da91886.json b/change/@fluentui-react-examples-8474c864-aca4-4d2a-b6f0-215b1da91886.json new file mode 100644 index 00000000000000..7406397c5c9f33 --- /dev/null +++ b/change/@fluentui-react-examples-8474c864-aca4-4d2a-b6f0-215b1da91886.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Remove @fluentui/react-make-styles from @fluentui/react-examples.", + "packageName": "@fluentui/react-examples", + "email": "tristan.watanabe@gmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-make-styles-e3ca26e1-8f64-4740-8ca9-b13472c35b96.json b/change/@fluentui-react-make-styles-e3ca26e1-8f64-4740-8ca9-b13472c35b96.json new file mode 100644 index 00000000000000..51eb03e6b5218e --- /dev/null +++ b/change/@fluentui-react-make-styles-e3ca26e1-8f64-4740-8ca9-b13472c35b96.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "react-make-styles: Migrate to new DX.", + "packageName": "@fluentui/react-make-styles", + "email": "tristan.watanabe@gmail.com", + "dependentChangeType": "patch" +} From d4456230afe8c759f04675855fcd5e0e7b35b552 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 25 Jun 2021 21:18:30 -0700 Subject: [PATCH 3/7] update language to ES2015 --- packages/react-make-styles/tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-make-styles/tsconfig.json b/packages/react-make-styles/tsconfig.json index 1259d048631bd2..32cf3b5e8163a5 100644 --- a/packages/react-make-styles/tsconfig.json +++ b/packages/react-make-styles/tsconfig.json @@ -4,7 +4,7 @@ "compilerOptions": { "target": "ES5", "module": "CommonJS", - "lib": ["es5", "dom"], + "lib": ["ES2015", "dom"], "outDir": "dist", "jsx": "react", "declaration": true, From 59db9a805d62c3dc739f9db06de7d75869819291 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Fri, 25 Jun 2021 21:24:12 -0700 Subject: [PATCH 4/7] ts-ignore react-provider import --- packages/react-make-styles/src/Basic.stories.tsx | 2 ++ packages/react-make-styles/src/RTL.stories.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/react-make-styles/src/Basic.stories.tsx b/packages/react-make-styles/src/Basic.stories.tsx index 0e3736a82ac7b7..a6de2cfcc975b7 100644 --- a/packages/react-make-styles/src/Basic.stories.tsx +++ b/packages/react-make-styles/src/Basic.stories.tsx @@ -1,4 +1,6 @@ import { makeStyles, mergeClasses } from './index'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore - (see https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982) import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme, teamsLightTheme } from '@fluentui/react-theme'; import * as React from 'react'; diff --git a/packages/react-make-styles/src/RTL.stories.tsx b/packages/react-make-styles/src/RTL.stories.tsx index d5998a9dc781e3..25d1986a6da1d3 100644 --- a/packages/react-make-styles/src/RTL.stories.tsx +++ b/packages/react-make-styles/src/RTL.stories.tsx @@ -1,4 +1,6 @@ import { makeStyles, mergeClasses } from './index'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore - (see https://github.com/microsoft/fluentui/pull/18695#issuecomment-868432982) import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme } from '@fluentui/react-theme'; import * as React from 'react'; From 3fd7522d78b0baa73e4b0fca1c3d55346d274113 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Mon, 28 Jun 2021 06:24:31 -0700 Subject: [PATCH 5/7] add empty config/tests file --- packages/react-make-styles/config/tests.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 packages/react-make-styles/config/tests.js diff --git a/packages/react-make-styles/config/tests.js b/packages/react-make-styles/config/tests.js new file mode 100644 index 00000000000000..2e211ae9e21420 --- /dev/null +++ b/packages/react-make-styles/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ From 3f5274e8cf21308942f6d18d3b266d63aaf5e682 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Mon, 28 Jun 2021 07:05:25 -0700 Subject: [PATCH 6/7] remove snapshotSerializers from jest.config --- packages/react-make-styles/jest.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-make-styles/jest.config.js b/packages/react-make-styles/jest.config.js index 1a85aa307a6e66..2ecd2f796375d4 100644 --- a/packages/react-make-styles/jest.config.js +++ b/packages/react-make-styles/jest.config.js @@ -17,5 +17,4 @@ module.exports = { }, coverageDirectory: './coverage', setupFilesAfterEnv: ['./config/tests.js'], - snapshotSerializers: ['@fluentui/jest-serializer-make-styles'], }; From be017339552f599a4d0ece4f80b08722bbeab798 Mon Sep 17 00:00:00 2001 From: Tristan Watanabe Date: Mon, 28 Jun 2021 08:53:34 -0700 Subject: [PATCH 7/7] add react-make-styles as dep in react-examples --- packages/react-examples/package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-examples/package.json b/packages/react-examples/package.json index 5614f2457ce7c6..0bb674fabaa02e 100644 --- a/packages/react-examples/package.json +++ b/packages/react-examples/package.json @@ -51,6 +51,7 @@ "@fluentui/react-focus": "^8.1.5", "@fluentui/react-hooks": "^8.2.3", "@fluentui/react-icons-mdl2": "^1.1.4", + "@fluentui/react-make-styles": "^9.0.0-alpha.42", "@fluentui/react-menu": "^9.0.0-alpha.40", "@fluentui/react-provider": "^9.0.0-alpha.47", "@fluentui/react-shared-contexts": "^9.0.0-alpha.15",