From 6411d84ccd06af80b51f22c257b89b596e57b544 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Tue, 13 Sep 2022 13:22:10 -0700 Subject: [PATCH 1/5] Added react-button-shim-v8-v9 package --- .github/CODEOWNERS | 1 + .../react-button-shim-v8-v9/.babelrc.json | 4 ++ .../react-button-shim-v8-v9/.eslintrc.json | 4 ++ .../react-button-shim-v8-v9/.npmignore | 29 +++++++++ .../react-button-shim-v8-v9/LICENSE | 15 +++++ .../react-button-shim-v8-v9/README.md | 5 ++ .../react-button-shim-v8-v9/Spec.md | 63 +++++++++++++++++++ .../config/api-extractor.json | 9 +++ .../react-button-shim-v8-v9/config/tests.js | 1 + .../etc/react-button-shim-v8-v9.api.md | 0 .../react-button-shim-v8-v9/jest.config.js | 21 +++++++ .../react-button-shim-v8-v9/just.config.ts | 3 + .../react-button-shim-v8-v9/package.json | 49 +++++++++++++++ .../react-button-shim-v8-v9/src/index.ts | 2 + .../react-button-shim-v8-v9/tsconfig.json | 22 +++++++ .../react-button-shim-v8-v9/tsconfig.lib.json | 14 +++++ .../tsconfig.spec.json | 9 +++ tsconfig.base.json | 1 + workspace.json | 37 ++++++----- 19 files changed, 274 insertions(+), 15 deletions(-) create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.babelrc.json create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.eslintrc.json create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/.npmignore create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/LICENSE create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/README.md create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/Spec.md create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/config/tests.js create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/jest.config.js create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/just.config.ts create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/package.json create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/src/index.ts create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json create mode 100644 packages/react-components-migration/react-button-shim-v8-v9/tsconfig.spec.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index f6ca7cc058adb7..511b0cf8af19f0 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -172,6 +172,7 @@ packages/react-components/babel-preset-global-context @microsoft/teams-prg packages/react-components/react-table @microsoft/teams-prg packages/react-components/react-progress @microsoft/cxe-red @tomi-msft packages/react-components/react-persona @microsoft/cxe-red @sopranopillow +packages/react-components-migration/react-button-shim-v8-v9 @microsoft/cxe-coastal # <%= NX-CODEOWNER-PLACEHOLDER %> diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.babelrc.json b/packages/react-components-migration/react-button-shim-v8-v9/.babelrc.json new file mode 100644 index 00000000000000..40e01373083cee --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/.babelrc.json @@ -0,0 +1,4 @@ +{ + "presets": ["@griffel"], + "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.eslintrc.json b/packages/react-components-migration/react-button-shim-v8-v9/.eslintrc.json new file mode 100644 index 00000000000000..ceea884c70dccc --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true +} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/.npmignore b/packages/react-components-migration/react-button-shim-v8-v9/.npmignore new file mode 100644 index 00000000000000..52d2a7273a151d --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/.npmignore @@ -0,0 +1,29 @@ +.storybook/ +.vscode/ +bundle-size/ +config/ +coverage/ +e2e/ +etc/ +node_modules/ +src/ +dist/types/ +temp/ +__fixtures__ +__mocks__ +__tests__ + +*.api.json +*.log +*.spec.* +*.stories.* +*.test.* +*.yml + +# config files +*config.* +*rc.* +.editorconfig +.eslint* +.git* +.prettierignore diff --git a/packages/react-components-migration/react-button-shim-v8-v9/LICENSE b/packages/react-components-migration/react-button-shim-v8-v9/LICENSE new file mode 100644 index 00000000000000..debd57baa7cc11 --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/LICENSE @@ -0,0 +1,15 @@ +@fluentui/react-button-shim-v8-v9 + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components-migration/react-button-shim-v8-v9/README.md b/packages/react-components-migration/react-button-shim-v8-v9/README.md new file mode 100644 index 00000000000000..144ab8fea3b87e --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/README.md @@ -0,0 +1,5 @@ +# @fluentui/react-button-shim-v8-v9 + +**React Button Shim V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** + +These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components-migration/react-button-shim-v8-v9/Spec.md b/packages/react-components-migration/react-button-shim-v8-v9/Spec.md new file mode 100644 index 00000000000000..b3a98ccb681f73 --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/Spec.md @@ -0,0 +1,63 @@ +# @fluentui/react-button-shim-v8-v9 Spec + +## Background + +_Description and use cases of this component_ + +## Prior Art + +_Include background research done for this component_ + +- _Link to Open UI research_ +- _Link to comparison of v7 and v0_ +- _Link to GitHub epic issue for the converged component_ + +## Sample Code + +_Provide some representative example code that uses the proposed API for the component_ + +## Variants + +_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ + +## API + +_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ + +## Structure + +- _**Public**_ +- _**Internal**_ +- _**DOM** - how the component will be rendered as HTML elements_ + +## Migration + +_Describe what will need to be done to upgrade from the existing implementations:_ + +- _Migration from v8_ +- _Migration from v0_ + +## Behaviors + +_Explain how the component will behave in use, including:_ + +- _Component States_ +- _Interaction_ + - _Keyboard_ + - _Cursor_ + - _Touch_ + - _Screen readers_ + +## Accessibility + +Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. + +- Decide whether to use **native element** or folow **ARIA** and provide reasons +- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. +- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. +- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used +- Specify texts for **state change announcements** - [ARIA live regions + ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) +- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them +- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) +- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json new file mode 100644 index 00000000000000..637d9797ae3e6e --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/config/api-extractor.json @@ -0,0 +1,9 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", + "dtsRollup": { + "enabled": true, + "untrimmedFilePath": "", + "publicTrimmedFilePath": "/dist/index.d.ts" + } +} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/config/tests.js b/packages/react-components-migration/react-button-shim-v8-v9/config/tests.js new file mode 100644 index 00000000000000..2e211ae9e21420 --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ diff --git a/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md b/packages/react-components-migration/react-button-shim-v8-v9/etc/react-button-shim-v8-v9.api.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-components-migration/react-button-shim-v8-v9/jest.config.js b/packages/react-components-migration/react-button-shim-v8-v9/jest.config.js new file mode 100644 index 00000000000000..66b3a4a094d1f5 --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/jest.config.js @@ -0,0 +1,21 @@ +// @ts-check + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'react-button-shim-v8-v9', + preset: '../../../jest.preset.js', + globals: { + 'ts-jest': { + tsConfig: '/tsconfig.spec.json', + diagnostics: false, + }, + }, + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], + snapshotSerializers: ['@griffel/jest-serializer'], +}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/just.config.ts b/packages/react-components-migration/react-button-shim-v8-v9/just.config.ts new file mode 100644 index 00000000000000..bcc7d9d264037c --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/just.config.ts @@ -0,0 +1,3 @@ +import { preset } from '@fluentui/scripts'; + +preset(); diff --git a/packages/react-components-migration/react-button-shim-v8-v9/package.json b/packages/react-components-migration/react-button-shim-v8-v9/package.json new file mode 100644 index 00000000000000..d6d96fbc91a8d5 --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/package.json @@ -0,0 +1,49 @@ +{ + "name": "@fluentui/react-button-shim-v8-v9", + "version": "9.0.0-alpha.0", + "private": true, + "description": "Fluent UI React Button shim to help migration from v8 to v9", + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "dist/index.d.ts", + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "scripts": { + "build": "just-scripts build", + "clean": "just-scripts clean", + "code-style": "just-scripts code-style", + "just": "just-scripts", + "lint": "just-scripts lint", + "test": "jest --passWithNoTests", + "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor", + "type-check": "tsc -b tsconfig.json" + }, + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/react-conformance": "*", + "@fluentui/react-conformance-griffel": "9.0.0-beta.12", + "@fluentui/scripts": "^1.0.0" + }, + "dependencies": { + "@fluentui/react-theme": "^9.0.0", + "@fluentui/react-utilities": "^9.0.2", + "@griffel/react": "^1.3.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "@types/react-dom": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0", + "react-dom": ">=16.8.0 <18.0.0" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "prerelease" + ] + } +} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts new file mode 100644 index 00000000000000..aacbad0068e241 --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/src/index.ts @@ -0,0 +1,2 @@ +// TODO: replace with real exports +export {}; diff --git a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json new file mode 100644 index 00000000000000..12ca516af1c5b2 --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "target": "ES2019", + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "jsx": "react", + "noUnusedLocals": true, + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json new file mode 100644 index 00000000000000..b2da24eff1b32f --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "dom"], + "declaration": true, + "declarationDir": "../../../dist/out-tsc/types", + "outDir": "../../../dist/out-tsc", + "inlineSources": true, + "types": ["static-assets", "environment"] + }, + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "include": ["./src/**/*.ts", "./src/**/*.tsx"] +} diff --git a/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.spec.json b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.spec.json new file mode 100644 index 00000000000000..469fcba4d7ba75 --- /dev/null +++ b/packages/react-components-migration/react-button-shim-v8-v9/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"] + }, + "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] +} diff --git a/tsconfig.base.json b/tsconfig.base.json index 2ccc6e72649f98..603a3fdcae7bd4 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -24,6 +24,7 @@ "@fluentui/react-avatar": ["packages/react-components/react-avatar/src/index.ts"], "@fluentui/react-badge": ["packages/react-components/react-badge/src/index.ts"], "@fluentui/react-button": ["packages/react-components/react-button/src/index.ts"], + "@fluentui/react-button-shim-v8-v9": ["packages/react-components-migration/react-button-shim-v8-v9/src/index.ts"], "@fluentui/react-card": ["packages/react-components/react-card/src/index.ts"], "@fluentui/react-checkbox": ["packages/react-components/react-checkbox/src/index.ts"], "@fluentui/react-combobox": ["packages/react-components/react-combobox/src/index.ts"], diff --git a/workspace.json b/workspace.json index 7db203a07c3829..42f5d84f8495a2 100644 --- a/workspace.json +++ b/workspace.json @@ -218,11 +218,6 @@ "projectType": "application", "implicitDependencies": [] }, - "@fluentui/stress-test": { - "root": "apps/stress-test", - "projectType": "application", - "implicitDependencies": [] - }, "@fluentui/priority-overflow": { "root": "packages/react-components/priority-overflow", "projectType": "library", @@ -260,6 +255,16 @@ "projectType": "library", "implicitDependencies": [] }, + "@fluentui/react-18-tests-v8": { + "root": "apps/react-18-tests-v8", + "projectType": "application", + "implicitDependencies": [] + }, + "@fluentui/react-18-tests-v9": { + "root": "apps/react-18-tests-v9", + "projectType": "application", + "implicitDependencies": [] + }, "@fluentui/react-accordion": { "root": "packages/react-components/react-accordion", "projectType": "library", @@ -312,6 +317,13 @@ "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, + "@fluentui/react-button-shim-v8-v9": { + "root": "packages/react-components-migration/react-button-shim-v8-v9", + "projectType": "library", + "implicitDependencies": [], + "sourceRoot": "packages/react-components-migration/react-button-shim-v8-v9/src", + "tags": ["vNext", "platform:web"] + }, "@fluentui/react-card": { "root": "packages/react-components/react-card", "projectType": "library", @@ -774,6 +786,11 @@ "projectType": "library", "implicitDependencies": [] }, + "@fluentui/stress-test": { + "root": "apps/stress-test", + "projectType": "application", + "implicitDependencies": [] + }, "@fluentui/style-utilities": { "root": "packages/style-utilities", "projectType": "library", @@ -817,16 +834,6 @@ "projectType": "application", "implicitDependencies": [] }, - "@fluentui/react-18-tests-v8": { - "root": "apps/react-18-tests-v8", - "projectType": "application", - "implicitDependencies": [] - }, - "@fluentui/react-18-tests-v9": { - "root": "apps/react-18-tests-v9", - "projectType": "application", - "implicitDependencies": [] - }, "@fluentui/ts-minbar-test-react": { "root": "apps/ts-minbar-test-react", "projectType": "application" From a2c529ae89c42c4f6f9e6262633d1fb64b46cf9f Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Tue, 13 Sep 2022 13:32:24 -0700 Subject: [PATCH 2/5] Added react-menu-shim-v8-v9 --- .github/CODEOWNERS | 1 + .../react-menu-shim-v8-v9/.babelrc.json | 4 ++ .../react-menu-shim-v8-v9/.eslintrc.json | 4 ++ .../react-menu-shim-v8-v9/.npmignore | 29 +++++++++ .../react-menu-shim-v8-v9/LICENSE | 15 +++++ .../react-menu-shim-v8-v9/README.md | 5 ++ .../react-menu-shim-v8-v9/Spec.md | 63 +++++++++++++++++++ .../config/api-extractor.json | 9 +++ .../react-menu-shim-v8-v9/config/tests.js | 1 + .../etc/react-menu-shim-v8-v9.api.md | 0 .../react-menu-shim-v8-v9/jest.config.js | 21 +++++++ .../react-menu-shim-v8-v9/just.config.ts | 3 + .../react-menu-shim-v8-v9/package.json | 49 +++++++++++++++ .../react-menu-shim-v8-v9/src/index.ts | 2 + .../react-menu-shim-v8-v9/tsconfig.json | 22 +++++++ .../react-menu-shim-v8-v9/tsconfig.lib.json | 14 +++++ .../react-menu-shim-v8-v9/tsconfig.spec.json | 9 +++ tsconfig.base.json | 1 + workspace.json | 7 +++ 19 files changed, 259 insertions(+) create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.babelrc.json create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.eslintrc.json create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/.npmignore create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/LICENSE create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/README.md create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/Spec.md create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/config/tests.js create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/jest.config.js create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/just.config.ts create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/package.json create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json create mode 100644 packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.spec.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 511b0cf8af19f0..69a56757a4357f 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -173,6 +173,7 @@ packages/react-components/react-table @microsoft/teams-prg packages/react-components/react-progress @microsoft/cxe-red @tomi-msft packages/react-components/react-persona @microsoft/cxe-red @sopranopillow packages/react-components-migration/react-button-shim-v8-v9 @microsoft/cxe-coastal +packages/react-components-migration/react-menu-shim-v8-v9 @microsoft/cxe-coastal # <%= NX-CODEOWNER-PLACEHOLDER %> diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.babelrc.json b/packages/react-components-migration/react-menu-shim-v8-v9/.babelrc.json new file mode 100644 index 00000000000000..40e01373083cee --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/.babelrc.json @@ -0,0 +1,4 @@ +{ + "presets": ["@griffel"], + "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.eslintrc.json b/packages/react-components-migration/react-menu-shim-v8-v9/.eslintrc.json new file mode 100644 index 00000000000000..ceea884c70dccc --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true +} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/.npmignore b/packages/react-components-migration/react-menu-shim-v8-v9/.npmignore new file mode 100644 index 00000000000000..52d2a7273a151d --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/.npmignore @@ -0,0 +1,29 @@ +.storybook/ +.vscode/ +bundle-size/ +config/ +coverage/ +e2e/ +etc/ +node_modules/ +src/ +dist/types/ +temp/ +__fixtures__ +__mocks__ +__tests__ + +*.api.json +*.log +*.spec.* +*.stories.* +*.test.* +*.yml + +# config files +*config.* +*rc.* +.editorconfig +.eslint* +.git* +.prettierignore diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/LICENSE b/packages/react-components-migration/react-menu-shim-v8-v9/LICENSE new file mode 100644 index 00000000000000..a91ec68d1bca6e --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/LICENSE @@ -0,0 +1,15 @@ +@fluentui/react-menu-shim-v8-v9 + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/README.md b/packages/react-components-migration/react-menu-shim-v8-v9/README.md new file mode 100644 index 00000000000000..2ed3ed46f5d0cc --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/README.md @@ -0,0 +1,5 @@ +# @fluentui/react-menu-shim-v8-v9 + +**React Menu Shim V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** + +These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/Spec.md b/packages/react-components-migration/react-menu-shim-v8-v9/Spec.md new file mode 100644 index 00000000000000..54cbdaa4e4f4cd --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/Spec.md @@ -0,0 +1,63 @@ +# @fluentui/react-menu-shim-v8-v9 Spec + +## Background + +_Description and use cases of this component_ + +## Prior Art + +_Include background research done for this component_ + +- _Link to Open UI research_ +- _Link to comparison of v7 and v0_ +- _Link to GitHub epic issue for the converged component_ + +## Sample Code + +_Provide some representative example code that uses the proposed API for the component_ + +## Variants + +_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ + +## API + +_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ + +## Structure + +- _**Public**_ +- _**Internal**_ +- _**DOM** - how the component will be rendered as HTML elements_ + +## Migration + +_Describe what will need to be done to upgrade from the existing implementations:_ + +- _Migration from v8_ +- _Migration from v0_ + +## Behaviors + +_Explain how the component will behave in use, including:_ + +- _Component States_ +- _Interaction_ + - _Keyboard_ + - _Cursor_ + - _Touch_ + - _Screen readers_ + +## Accessibility + +Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. + +- Decide whether to use **native element** or folow **ARIA** and provide reasons +- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. +- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. +- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used +- Specify texts for **state change announcements** - [ARIA live regions + ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) +- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them +- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) +- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json new file mode 100644 index 00000000000000..637d9797ae3e6e --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/config/api-extractor.json @@ -0,0 +1,9 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", + "dtsRollup": { + "enabled": true, + "untrimmedFilePath": "", + "publicTrimmedFilePath": "/dist/index.d.ts" + } +} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/config/tests.js b/packages/react-components-migration/react-menu-shim-v8-v9/config/tests.js new file mode 100644 index 00000000000000..2e211ae9e21420 --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md b/packages/react-components-migration/react-menu-shim-v8-v9/etc/react-menu-shim-v8-v9.api.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/jest.config.js b/packages/react-components-migration/react-menu-shim-v8-v9/jest.config.js new file mode 100644 index 00000000000000..919e856a190d8e --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/jest.config.js @@ -0,0 +1,21 @@ +// @ts-check + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'react-menu-shim-v8-v9', + preset: '../../../jest.preset.js', + globals: { + 'ts-jest': { + tsConfig: '/tsconfig.spec.json', + diagnostics: false, + }, + }, + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], + snapshotSerializers: ['@griffel/jest-serializer'], +}; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/just.config.ts b/packages/react-components-migration/react-menu-shim-v8-v9/just.config.ts new file mode 100644 index 00000000000000..bcc7d9d264037c --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/just.config.ts @@ -0,0 +1,3 @@ +import { preset } from '@fluentui/scripts'; + +preset(); diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/package.json b/packages/react-components-migration/react-menu-shim-v8-v9/package.json new file mode 100644 index 00000000000000..6fffafbc3ea702 --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/package.json @@ -0,0 +1,49 @@ +{ + "name": "@fluentui/react-menu-shim-v8-v9", + "version": "9.0.0-alpha.0", + "private": true, + "description": "React components for building web experiences", + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "dist/index.d.ts", + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "scripts": { + "build": "just-scripts build", + "clean": "just-scripts clean", + "code-style": "just-scripts code-style", + "just": "just-scripts", + "lint": "just-scripts lint", + "test": "jest --passWithNoTests", + "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor", + "type-check": "tsc -b tsconfig.json" + }, + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/react-conformance": "*", + "@fluentui/react-conformance-griffel": "9.0.0-beta.12", + "@fluentui/scripts": "^1.0.0" + }, + "dependencies": { + "@fluentui/react-theme": "^9.0.0", + "@fluentui/react-utilities": "^9.0.2", + "@griffel/react": "^1.3.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "@types/react-dom": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0", + "react-dom": ">=16.8.0 <18.0.0" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "prerelease" + ] + } +} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts new file mode 100644 index 00000000000000..aacbad0068e241 --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts @@ -0,0 +1,2 @@ +// TODO: replace with real exports +export {}; diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json new file mode 100644 index 00000000000000..12ca516af1c5b2 --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "target": "ES2019", + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "jsx": "react", + "noUnusedLocals": true, + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json new file mode 100644 index 00000000000000..b2da24eff1b32f --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "dom"], + "declaration": true, + "declarationDir": "../../../dist/out-tsc/types", + "outDir": "../../../dist/out-tsc", + "inlineSources": true, + "types": ["static-assets", "environment"] + }, + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "include": ["./src/**/*.ts", "./src/**/*.tsx"] +} diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.spec.json b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.spec.json new file mode 100644 index 00000000000000..469fcba4d7ba75 --- /dev/null +++ b/packages/react-components-migration/react-menu-shim-v8-v9/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"] + }, + "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] +} diff --git a/tsconfig.base.json b/tsconfig.base.json index 603a3fdcae7bd4..22af24ad7707cd 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -41,6 +41,7 @@ "@fluentui/react-label": ["packages/react-components/react-label/src/index.ts"], "@fluentui/react-link": ["packages/react-components/react-link/src/index.ts"], "@fluentui/react-menu": ["packages/react-components/react-menu/src/index.ts"], + "@fluentui/react-menu-shim-v8-v9": ["packages/react-components-migration/react-menu-shim-v8-v9/src/index.ts"], "@fluentui/react-overflow": ["packages/react-components/react-overflow/src/index.ts"], "@fluentui/react-persona": ["packages/react-components/react-persona/src/index.ts"], "@fluentui/react-popover": ["packages/react-components/react-popover/src/index.ts"], diff --git a/workspace.json b/workspace.json index 42f5d84f8495a2..b9a793cb35bc2d 100644 --- a/workspace.json +++ b/workspace.json @@ -508,6 +508,13 @@ "tags": ["vNext", "platform:web"], "implicitDependencies": [] }, + "@fluentui/react-menu-shim-v8-v9": { + "root": "packages/react-components-migration/react-menu-shim-v8-v9", + "projectType": "library", + "implicitDependencies": [], + "sourceRoot": "packages/react-components-migration/react-menu-shim-v8-v9/src", + "tags": ["vNext", "platform:web"] + }, "@fluentui/react-monaco-editor": { "root": "packages/react-monaco-editor", "projectType": "library", From 5d7a568e1d6bd69a5799b692daba2d89aafd57e3 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Tue, 13 Sep 2022 13:41:46 -0700 Subject: [PATCH 3/5] Added react-stack-shim-v8-v9 --- .github/CODEOWNERS | 1 + .../react-stack-shim-v8-v9/.babelrc.json | 4 ++ .../react-stack-shim-v8-v9/.eslintrc.json | 4 ++ .../react-stack-shim-v8-v9/.npmignore | 29 +++++++++ .../react-stack-shim-v8-v9/LICENSE | 15 +++++ .../react-stack-shim-v8-v9/README.md | 5 ++ .../react-stack-shim-v8-v9/Spec.md | 63 +++++++++++++++++++ .../config/api-extractor.json | 9 +++ .../react-stack-shim-v8-v9/config/tests.js | 1 + .../etc/react-stack-shim-v8-v9.api.md | 0 .../react-stack-shim-v8-v9/jest.config.js | 21 +++++++ .../react-stack-shim-v8-v9/just.config.ts | 3 + .../react-stack-shim-v8-v9/package.json | 49 +++++++++++++++ .../react-stack-shim-v8-v9/src/index.ts | 2 + .../react-stack-shim-v8-v9/tsconfig.json | 22 +++++++ .../react-stack-shim-v8-v9/tsconfig.lib.json | 14 +++++ .../react-stack-shim-v8-v9/tsconfig.spec.json | 9 +++ tsconfig.base.json | 1 + workspace.json | 7 +++ 19 files changed, 259 insertions(+) create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.babelrc.json create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.eslintrc.json create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/.npmignore create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/LICENSE create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/README.md create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/Spec.md create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/config/tests.js create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/jest.config.js create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/just.config.ts create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/package.json create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json create mode 100644 packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.spec.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 69a56757a4357f..444846417a058c 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -174,6 +174,7 @@ packages/react-components/react-progress @microsoft/cxe-red @tomi-msft packages/react-components/react-persona @microsoft/cxe-red @sopranopillow packages/react-components-migration/react-button-shim-v8-v9 @microsoft/cxe-coastal packages/react-components-migration/react-menu-shim-v8-v9 @microsoft/cxe-coastal +packages/react-components-migration/react-stack-shim-v8-v9 @microsoft/cxe-coastal # <%= NX-CODEOWNER-PLACEHOLDER %> diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.babelrc.json b/packages/react-components-migration/react-stack-shim-v8-v9/.babelrc.json new file mode 100644 index 00000000000000..40e01373083cee --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/.babelrc.json @@ -0,0 +1,4 @@ +{ + "presets": ["@griffel"], + "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.eslintrc.json b/packages/react-components-migration/react-stack-shim-v8-v9/.eslintrc.json new file mode 100644 index 00000000000000..ceea884c70dccc --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true +} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/.npmignore b/packages/react-components-migration/react-stack-shim-v8-v9/.npmignore new file mode 100644 index 00000000000000..52d2a7273a151d --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/.npmignore @@ -0,0 +1,29 @@ +.storybook/ +.vscode/ +bundle-size/ +config/ +coverage/ +e2e/ +etc/ +node_modules/ +src/ +dist/types/ +temp/ +__fixtures__ +__mocks__ +__tests__ + +*.api.json +*.log +*.spec.* +*.stories.* +*.test.* +*.yml + +# config files +*config.* +*rc.* +.editorconfig +.eslint* +.git* +.prettierignore diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/LICENSE b/packages/react-components-migration/react-stack-shim-v8-v9/LICENSE new file mode 100644 index 00000000000000..2698596e14047d --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/LICENSE @@ -0,0 +1,15 @@ +@fluentui/react-stack-shim-v8-v9 + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/README.md b/packages/react-components-migration/react-stack-shim-v8-v9/README.md new file mode 100644 index 00000000000000..25bbbf8d951b2a --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/README.md @@ -0,0 +1,5 @@ +# @fluentui/react-stack-shim-v8-v9 + +**React Stack Shim V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** + +These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/Spec.md b/packages/react-components-migration/react-stack-shim-v8-v9/Spec.md new file mode 100644 index 00000000000000..fa45c7c5769561 --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/Spec.md @@ -0,0 +1,63 @@ +# @fluentui/react-stack-shim-v8-v9 Spec + +## Background + +_Description and use cases of this component_ + +## Prior Art + +_Include background research done for this component_ + +- _Link to Open UI research_ +- _Link to comparison of v7 and v0_ +- _Link to GitHub epic issue for the converged component_ + +## Sample Code + +_Provide some representative example code that uses the proposed API for the component_ + +## Variants + +_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ + +## API + +_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ + +## Structure + +- _**Public**_ +- _**Internal**_ +- _**DOM** - how the component will be rendered as HTML elements_ + +## Migration + +_Describe what will need to be done to upgrade from the existing implementations:_ + +- _Migration from v8_ +- _Migration from v0_ + +## Behaviors + +_Explain how the component will behave in use, including:_ + +- _Component States_ +- _Interaction_ + - _Keyboard_ + - _Cursor_ + - _Touch_ + - _Screen readers_ + +## Accessibility + +Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. + +- Decide whether to use **native element** or folow **ARIA** and provide reasons +- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. +- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. +- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used +- Specify texts for **state change announcements** - [ARIA live regions + ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) +- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them +- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) +- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json new file mode 100644 index 00000000000000..637d9797ae3e6e --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/config/api-extractor.json @@ -0,0 +1,9 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", + "dtsRollup": { + "enabled": true, + "untrimmedFilePath": "", + "publicTrimmedFilePath": "/dist/index.d.ts" + } +} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/config/tests.js b/packages/react-components-migration/react-stack-shim-v8-v9/config/tests.js new file mode 100644 index 00000000000000..2e211ae9e21420 --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md b/packages/react-components-migration/react-stack-shim-v8-v9/etc/react-stack-shim-v8-v9.api.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/jest.config.js b/packages/react-components-migration/react-stack-shim-v8-v9/jest.config.js new file mode 100644 index 00000000000000..e3b98dddaf56f8 --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/jest.config.js @@ -0,0 +1,21 @@ +// @ts-check + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'react-stack-shim-v8-v9', + preset: '../../../jest.preset.js', + globals: { + 'ts-jest': { + tsConfig: '/tsconfig.spec.json', + diagnostics: false, + }, + }, + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], + snapshotSerializers: ['@griffel/jest-serializer'], +}; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/just.config.ts b/packages/react-components-migration/react-stack-shim-v8-v9/just.config.ts new file mode 100644 index 00000000000000..bcc7d9d264037c --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/just.config.ts @@ -0,0 +1,3 @@ +import { preset } from '@fluentui/scripts'; + +preset(); diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/package.json b/packages/react-components-migration/react-stack-shim-v8-v9/package.json new file mode 100644 index 00000000000000..b5b00a916e8583 --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/package.json @@ -0,0 +1,49 @@ +{ + "name": "@fluentui/react-stack-shim-v8-v9", + "version": "9.0.0-alpha.0", + "private": true, + "description": "React components for building web experiences", + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "dist/index.d.ts", + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "scripts": { + "build": "just-scripts build", + "clean": "just-scripts clean", + "code-style": "just-scripts code-style", + "just": "just-scripts", + "lint": "just-scripts lint", + "test": "jest --passWithNoTests", + "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor", + "type-check": "tsc -b tsconfig.json" + }, + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/react-conformance": "*", + "@fluentui/react-conformance-griffel": "9.0.0-beta.12", + "@fluentui/scripts": "^1.0.0" + }, + "dependencies": { + "@fluentui/react-theme": "^9.0.0", + "@fluentui/react-utilities": "^9.0.2", + "@griffel/react": "^1.3.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "@types/react-dom": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0", + "react-dom": ">=16.8.0 <18.0.0" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "prerelease" + ] + } +} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts new file mode 100644 index 00000000000000..aacbad0068e241 --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts @@ -0,0 +1,2 @@ +// TODO: replace with real exports +export {}; diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json new file mode 100644 index 00000000000000..12ca516af1c5b2 --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "target": "ES2019", + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "jsx": "react", + "noUnusedLocals": true, + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json new file mode 100644 index 00000000000000..b2da24eff1b32f --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "dom"], + "declaration": true, + "declarationDir": "../../../dist/out-tsc/types", + "outDir": "../../../dist/out-tsc", + "inlineSources": true, + "types": ["static-assets", "environment"] + }, + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "include": ["./src/**/*.ts", "./src/**/*.tsx"] +} diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.spec.json b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.spec.json new file mode 100644 index 00000000000000..469fcba4d7ba75 --- /dev/null +++ b/packages/react-components-migration/react-stack-shim-v8-v9/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"] + }, + "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] +} diff --git a/tsconfig.base.json b/tsconfig.base.json index 22af24ad7707cd..0acda95711481a 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -57,6 +57,7 @@ "@fluentui/react-slider": ["packages/react-components/react-slider/src/index.ts"], "@fluentui/react-spinbutton": ["packages/react-components/react-spinbutton/src/index.ts"], "@fluentui/react-spinner": ["packages/react-components/react-spinner/src/index.ts"], + "@fluentui/react-stack-shim-v8-v9": ["packages/react-components-migration/react-stack-shim-v8-v9/src/index.ts"], "@fluentui/react-storybook": ["packages/react-components/react-storybook/src/index.ts"], "@fluentui/react-storybook-addon": ["packages/react-components/react-storybook-addon/src/index.ts"], "@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"], diff --git a/workspace.json b/workspace.json index b9a793cb35bc2d..e816dfe829c341 100644 --- a/workspace.json +++ b/workspace.json @@ -655,6 +655,13 @@ "sourceRoot": "packages/react-components/react-spinner/src", "tags": ["vNext", "platform:web"] }, + "@fluentui/react-stack-shim-v8-v9": { + "root": "packages/react-components-migration/react-stack-shim-v8-v9", + "projectType": "library", + "implicitDependencies": [], + "sourceRoot": "packages/react-components-migration/react-stack-shim-v8-v9/src", + "tags": ["vNext", "platform:web"] + }, "@fluentui/react-storybook": { "root": "packages/react-components/react-storybook", "projectType": "library", From 6ec4814b4503f1329e827761640c50a04c18fa7c Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Tue, 13 Sep 2022 13:50:48 -0700 Subject: [PATCH 4/5] Added react-theme-shim-v8-v9 package --- .github/CODEOWNERS | 1 + .../react-theme-shim-v8-v9/.babelrc.json | 4 ++ .../react-theme-shim-v8-v9/.eslintrc.json | 4 ++ .../react-theme-shim-v8-v9/.npmignore | 29 +++++++++ .../react-theme-shim-v8-v9/LICENSE | 15 +++++ .../react-theme-shim-v8-v9/README.md | 5 ++ .../react-theme-shim-v8-v9/Spec.md | 63 +++++++++++++++++++ .../config/api-extractor.json | 9 +++ .../react-theme-shim-v8-v9/config/tests.js | 1 + .../etc/react-theme-shim-v8-v9.api.md | 0 .../react-theme-shim-v8-v9/jest.config.js | 21 +++++++ .../react-theme-shim-v8-v9/just.config.ts | 3 + .../react-theme-shim-v8-v9/package.json | 49 +++++++++++++++ .../react-theme-shim-v8-v9/src/index.ts | 2 + .../react-theme-shim-v8-v9/tsconfig.json | 22 +++++++ .../react-theme-shim-v8-v9/tsconfig.lib.json | 14 +++++ .../react-theme-shim-v8-v9/tsconfig.spec.json | 9 +++ tsconfig.base.json | 1 + workspace.json | 7 +++ 19 files changed, 259 insertions(+) create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.babelrc.json create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.eslintrc.json create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/.npmignore create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/LICENSE create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/README.md create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/Spec.md create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/config/tests.js create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/jest.config.js create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/just.config.ts create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/package.json create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json create mode 100644 packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.spec.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 444846417a058c..6ffa3c17318d0d 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -175,6 +175,7 @@ packages/react-components/react-persona @microsoft/cxe-red @sopranopillow packages/react-components-migration/react-button-shim-v8-v9 @microsoft/cxe-coastal packages/react-components-migration/react-menu-shim-v8-v9 @microsoft/cxe-coastal packages/react-components-migration/react-stack-shim-v8-v9 @microsoft/cxe-coastal +packages/react-components-migration/react-theme-shim-v8-v9 @microsoft/cxe-coastal # <%= NX-CODEOWNER-PLACEHOLDER %> diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.babelrc.json b/packages/react-components-migration/react-theme-shim-v8-v9/.babelrc.json new file mode 100644 index 00000000000000..40e01373083cee --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/.babelrc.json @@ -0,0 +1,4 @@ +{ + "presets": ["@griffel"], + "plugins": ["annotate-pure-calls", "@babel/transform-react-pure-annotations"] +} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.eslintrc.json b/packages/react-components-migration/react-theme-shim-v8-v9/.eslintrc.json new file mode 100644 index 00000000000000..ceea884c70dccc --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/.eslintrc.json @@ -0,0 +1,4 @@ +{ + "extends": ["plugin:@fluentui/eslint-plugin/react"], + "root": true +} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/.npmignore b/packages/react-components-migration/react-theme-shim-v8-v9/.npmignore new file mode 100644 index 00000000000000..52d2a7273a151d --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/.npmignore @@ -0,0 +1,29 @@ +.storybook/ +.vscode/ +bundle-size/ +config/ +coverage/ +e2e/ +etc/ +node_modules/ +src/ +dist/types/ +temp/ +__fixtures__ +__mocks__ +__tests__ + +*.api.json +*.log +*.spec.* +*.stories.* +*.test.* +*.yml + +# config files +*config.* +*rc.* +.editorconfig +.eslint* +.git* +.prettierignore diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/LICENSE b/packages/react-components-migration/react-theme-shim-v8-v9/LICENSE new file mode 100644 index 00000000000000..548985be092ab4 --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/LICENSE @@ -0,0 +1,15 @@ +@fluentui/react-theme-shim-v8-v9 + +Copyright (c) Microsoft Corporation + +All rights reserved. + +MIT License + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/README.md b/packages/react-components-migration/react-theme-shim-v8-v9/README.md new file mode 100644 index 00000000000000..f2bb41b9bb527e --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/README.md @@ -0,0 +1,5 @@ +# @fluentui/react-theme-shim-v8-v9 + +**React Theme Shim V8 V9 components for [Fluent UI React](https://react.fluentui.dev/)** + +These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release. diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/Spec.md b/packages/react-components-migration/react-theme-shim-v8-v9/Spec.md new file mode 100644 index 00000000000000..50c00808a47f4f --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/Spec.md @@ -0,0 +1,63 @@ +# @fluentui/react-theme-shim-v8-v9 Spec + +## Background + +_Description and use cases of this component_ + +## Prior Art + +_Include background research done for this component_ + +- _Link to Open UI research_ +- _Link to comparison of v7 and v0_ +- _Link to GitHub epic issue for the converged component_ + +## Sample Code + +_Provide some representative example code that uses the proposed API for the component_ + +## Variants + +_Describe visual or functional variants of this control, if applicable. For example, a slider could have a 2D variant._ + +## API + +_List the **Props** and **Slots** proposed for the component. Ideally this would just be a link to the component's `.types.ts` file_ + +## Structure + +- _**Public**_ +- _**Internal**_ +- _**DOM** - how the component will be rendered as HTML elements_ + +## Migration + +_Describe what will need to be done to upgrade from the existing implementations:_ + +- _Migration from v8_ +- _Migration from v0_ + +## Behaviors + +_Explain how the component will behave in use, including:_ + +- _Component States_ +- _Interaction_ + - _Keyboard_ + - _Cursor_ + - _Touch_ + - _Screen readers_ + +## Accessibility + +Base accessibility information is included in the design document. After the spec is filled and review, outcomes from it need to be communicated to design and incorporated in the design document. + +- Decide whether to use **native element** or folow **ARIA** and provide reasons +- Identify the **[ARIA](https://www.w3.org/TR/wai-aria-practices-1.2/) pattern** and, if the component is listed there, follow its specification as possible. +- Identify accessibility **variants**, the `role` ([ARIA roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)) of the component, its `slots` and `aria-*` props. +- Describe the **keyboard navigation**: Tab Oder and Arrow Key Navigation. Describe any other keyboard **shortcuts** used +- Specify texts for **state change announcements** - [ARIA live regions + ](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) (number of available items in dropdown, error messages, confirmations, ...) +- Identify UI parts that appear on **hover or focus** and specify keyboard and screen reader interaction with them +- List cases when **focus** needs to be **trapped** in sections of the UI (for dialogs and popups or for hierarchical navigation) +- List cases when **focus** needs to be **moved programatically** (if parts of the UI are appearing/disappearing or other cases) diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json b/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json new file mode 100644 index 00000000000000..637d9797ae3e6e --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/config/api-extractor.json @@ -0,0 +1,9 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", + "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", + "dtsRollup": { + "enabled": true, + "untrimmedFilePath": "", + "publicTrimmedFilePath": "/dist/index.d.ts" + } +} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/config/tests.js b/packages/react-components-migration/react-theme-shim-v8-v9/config/tests.js new file mode 100644 index 00000000000000..2e211ae9e21420 --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/config/tests.js @@ -0,0 +1 @@ +/** Jest test setup file. */ diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md b/packages/react-components-migration/react-theme-shim-v8-v9/etc/react-theme-shim-v8-v9.api.md new file mode 100644 index 00000000000000..e69de29bb2d1d6 diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/jest.config.js b/packages/react-components-migration/react-theme-shim-v8-v9/jest.config.js new file mode 100644 index 00000000000000..ddb37f75f680ad --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/jest.config.js @@ -0,0 +1,21 @@ +// @ts-check + +/** + * @type {import('@jest/types').Config.InitialOptions} + */ +module.exports = { + displayName: 'react-theme-shim-v8-v9', + preset: '../../../jest.preset.js', + globals: { + 'ts-jest': { + tsConfig: '/tsconfig.spec.json', + diagnostics: false, + }, + }, + transform: { + '^.+\\.tsx?$': 'ts-jest', + }, + coverageDirectory: './coverage', + setupFilesAfterEnv: ['./config/tests.js'], + snapshotSerializers: ['@griffel/jest-serializer'], +}; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/just.config.ts b/packages/react-components-migration/react-theme-shim-v8-v9/just.config.ts new file mode 100644 index 00000000000000..bcc7d9d264037c --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/just.config.ts @@ -0,0 +1,3 @@ +import { preset } from '@fluentui/scripts'; + +preset(); diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/package.json b/packages/react-components-migration/react-theme-shim-v8-v9/package.json new file mode 100644 index 00000000000000..a95d4eafdd0574 --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/package.json @@ -0,0 +1,49 @@ +{ + "name": "@fluentui/react-theme-shim-v8-v9", + "version": "9.0.0-alpha.0", + "private": true, + "description": "React components for building web experiences", + "main": "lib-commonjs/index.js", + "module": "lib/index.js", + "typings": "dist/index.d.ts", + "sideEffects": false, + "repository": { + "type": "git", + "url": "https://github.com/microsoft/fluentui" + }, + "license": "MIT", + "scripts": { + "build": "just-scripts build", + "clean": "just-scripts clean", + "code-style": "just-scripts code-style", + "just": "just-scripts", + "lint": "just-scripts lint", + "test": "jest --passWithNoTests", + "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor", + "type-check": "tsc -b tsconfig.json" + }, + "devDependencies": { + "@fluentui/eslint-plugin": "*", + "@fluentui/react-conformance": "*", + "@fluentui/react-conformance-griffel": "9.0.0-beta.12", + "@fluentui/scripts": "^1.0.0" + }, + "dependencies": { + "@fluentui/react-theme": "^9.0.0", + "@fluentui/react-utilities": "^9.0.2", + "@griffel/react": "^1.3.0", + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@types/react": ">=16.8.0 <18.0.0", + "@types/react-dom": ">=16.8.0 <18.0.0", + "react": ">=16.8.0 <18.0.0", + "react-dom": ">=16.8.0 <18.0.0" + }, + "beachball": { + "disallowedChangeTypes": [ + "major", + "prerelease" + ] + } +} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts b/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts new file mode 100644 index 00000000000000..aacbad0068e241 --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts @@ -0,0 +1,2 @@ +// TODO: replace with real exports +export {}; diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json new file mode 100644 index 00000000000000..12ca516af1c5b2 --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.json @@ -0,0 +1,22 @@ +{ + "extends": "../../../tsconfig.base.json", + "compilerOptions": { + "target": "ES2019", + "noEmit": true, + "isolatedModules": true, + "importHelpers": true, + "jsx": "react", + "noUnusedLocals": true, + "preserveConstEnums": true + }, + "include": [], + "files": [], + "references": [ + { + "path": "./tsconfig.lib.json" + }, + { + "path": "./tsconfig.spec.json" + } + ] +} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json new file mode 100644 index 00000000000000..b2da24eff1b32f --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.lib.json @@ -0,0 +1,14 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "noEmit": false, + "lib": ["ES2019", "dom"], + "declaration": true, + "declarationDir": "../../../dist/out-tsc/types", + "outDir": "../../../dist/out-tsc", + "inlineSources": true, + "types": ["static-assets", "environment"] + }, + "exclude": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx"], + "include": ["./src/**/*.ts", "./src/**/*.tsx"] +} diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.spec.json b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.spec.json new file mode 100644 index 00000000000000..469fcba4d7ba75 --- /dev/null +++ b/packages/react-components-migration/react-theme-shim-v8-v9/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "CommonJS", + "outDir": "dist", + "types": ["jest", "node"] + }, + "include": ["**/*.spec.ts", "**/*.spec.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"] +} diff --git a/tsconfig.base.json b/tsconfig.base.json index 0acda95711481a..49ee99bb56e5c2 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -68,6 +68,7 @@ "@fluentui/react-textarea": ["packages/react-components/react-textarea/src/index.ts"], "@fluentui/react-theme": ["packages/react-components/react-theme/src/index.ts"], "@fluentui/react-theme-sass": ["packages/react-components/react-theme-sass/src/index.ts"], + "@fluentui/react-theme-shim-v8-v9": ["packages/react-components-migration/react-theme-shim-v8-v9/src/index.ts"], "@fluentui/react-toolbar": ["packages/react-components/react-toolbar/src/index.ts"], "@fluentui/react-tooltip": ["packages/react-components/react-tooltip/src/index.ts"], "@fluentui/react-utilities": ["packages/react-components/react-utilities/src/index.ts"], diff --git a/workspace.json b/workspace.json index e816dfe829c341..223e01dd6a7880 100644 --- a/workspace.json +++ b/workspace.json @@ -737,6 +737,13 @@ "sourceRoot": "packages/react-components/react-theme-sass/src", "tags": ["vNext", "platform:web"] }, + "@fluentui/react-theme-shim-v8-v9": { + "root": "packages/react-components-migration/react-theme-shim-v8-v9", + "projectType": "library", + "implicitDependencies": [], + "sourceRoot": "packages/react-components-migration/react-theme-shim-v8-v9/src", + "tags": ["vNext", "platform:web"] + }, "@fluentui/react-toolbar": { "root": "packages/react-components/react-toolbar", "projectType": "library", From f0326633017279776f9a41086939c441e89ccb55 Mon Sep 17 00:00:00 2001 From: GeoffCoxMSFT Date: Tue, 13 Sep 2022 13:52:25 -0700 Subject: [PATCH 5/5] Updated package descriptions --- .../react-menu-shim-v8-v9/package.json | 2 +- .../react-stack-shim-v8-v9/package.json | 2 +- .../react-theme-shim-v8-v9/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-components-migration/react-menu-shim-v8-v9/package.json b/packages/react-components-migration/react-menu-shim-v8-v9/package.json index 6fffafbc3ea702..82cb125c116dd0 100644 --- a/packages/react-components-migration/react-menu-shim-v8-v9/package.json +++ b/packages/react-components-migration/react-menu-shim-v8-v9/package.json @@ -2,7 +2,7 @@ "name": "@fluentui/react-menu-shim-v8-v9", "version": "9.0.0-alpha.0", "private": true, - "description": "React components for building web experiences", + "description": "Fluent UI React Menu shim to help migration from v8 to v9", "main": "lib-commonjs/index.js", "module": "lib/index.js", "typings": "dist/index.d.ts", diff --git a/packages/react-components-migration/react-stack-shim-v8-v9/package.json b/packages/react-components-migration/react-stack-shim-v8-v9/package.json index b5b00a916e8583..e086b71528bf82 100644 --- a/packages/react-components-migration/react-stack-shim-v8-v9/package.json +++ b/packages/react-components-migration/react-stack-shim-v8-v9/package.json @@ -2,7 +2,7 @@ "name": "@fluentui/react-stack-shim-v8-v9", "version": "9.0.0-alpha.0", "private": true, - "description": "React components for building web experiences", + "description": "Fluent UI React Stack shim to help migration from v8 to v9", "main": "lib-commonjs/index.js", "module": "lib/index.js", "typings": "dist/index.d.ts", diff --git a/packages/react-components-migration/react-theme-shim-v8-v9/package.json b/packages/react-components-migration/react-theme-shim-v8-v9/package.json index a95d4eafdd0574..28a9c8cce35f0a 100644 --- a/packages/react-components-migration/react-theme-shim-v8-v9/package.json +++ b/packages/react-components-migration/react-theme-shim-v8-v9/package.json @@ -2,7 +2,7 @@ "name": "@fluentui/react-theme-shim-v8-v9", "version": "9.0.0-alpha.0", "private": true, - "description": "React components for building web experiences", + "description": "Fluent UI React Theme shim to help migration from v8 to v9", "main": "lib-commonjs/index.js", "module": "lib/index.js", "typings": "dist/index.d.ts",