diff --git a/.ado/markdown-link-check-config.json b/.ado/markdown-link-check-config.json index a5d13f5291..83496e455e 100644 --- a/.ado/markdown-link-check-config.json +++ b/.ado/markdown-link-check-config.json @@ -8,6 +8,9 @@ }, { "pattern": "https://github.com/microsoft/fluentui-design-tokens" + }, + { + "pattern": "^https://badge.fury.io/js/@fluentui-react-native%2Fdependency-profiles" } ], "timeout": "5s", diff --git a/change/@fluentui-react-native-dependency-profiles-d4e5e32f-5daa-467f-8065-493955018ada.json b/change/@fluentui-react-native-dependency-profiles-d4e5e32f-5daa-467f-8065-493955018ada.json new file mode 100644 index 0000000000..7202edea02 --- /dev/null +++ b/change/@fluentui-react-native-dependency-profiles-d4e5e32f-5daa-467f-8065-493955018ada.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Add README", + "packageName": "@fluentui-react-native/dependency-profiles", + "email": "krsiler@microsoft.com", + "dependentChangeType": "none" +} diff --git a/packages/dependency-profiles/README.md b/packages/dependency-profiles/README.md new file mode 100644 index 0000000000..c14a310371 --- /dev/null +++ b/packages/dependency-profiles/README.md @@ -0,0 +1,58 @@ +# @fluentui-react-native/dependency-profiles + +[![npm version](https://badge.fury.io/js/@fluentui-react-native%2Fdependency-profiles.svg)](https://badge.fury.io/js/@fluentui-react-native%2Fdependency-profiles) + +`@fluentui-react-native/dependency-profiles` is a package that contains dependency profiles for FluentUI React Native. A dependency profile is a set of package@version mappings, usually tied to a single version of react-native. These profiles can be used by users of `@rnx-kit/align-deps` to manage FURN dependencies in their repo. To learn more about `@rnx-kit/align-deps`, visit https://microsoft.github.io/rnx-kit/docs/tools/align-deps. + +## Usage + +If you have an existing repo that uses FURN and you would like to stay up-to-date on the latest versions of FURN packages for a specific version of react-native, you can start by installing `@rnx-kit/align-deps`. Installation and usage instructions can be found here: https://microsoft.github.io/rnx-kit/docs/tools/align-deps. + +Once `@rnx-kit/align-deps` is installed, you can add `@fluentui-react-native/dependency-profiles` as a dependency in your repo. + +``` +yarn add @fluentui-react-native/dependency-profiles --dev +``` + +or + +``` +npm add --save-dev @fluentui-react-native/dependency-profiles +``` + +Next, configure each of your onboarded React Native packages to use a profile from `@fluentui-react-native/dependency-profiles` for the react-native version you're using under "presets". You can read more about configurations here: https://microsoft.github.io/rnx-kit/docs/tools/align-deps#configure and presets here: https://microsoft.github.io/rnx-kit/docs/tools/align-deps#presets. + +``` ++ const furnProfiles = require('@fluentui-react-native/dependency-profiles'); ++ const furnProfile = furnProfiles[0.68]; + + . + . + . + + { + "rnx-kit": { + "alignDeps": { ++ "presets": [ ++ "furnProfile" ++ ], + "requirements": [ + "react-native@0.68" + ], + "capabilities": [ + "core-android", + "core-ios", + "core-macos", + "core-windows", + "react" + ] + } + } + } +``` + +Now, you can use the `@rnx-kit/align-deps` tool to keep your FURN dependencies up-to-date by updating `@fluentui-react-native/dependency-profiles` to newer versions and running `yarn rnx-align-deps --write`. + +## Note for Package Maintainers + +Since this package is intended to contain multiple profiles for different versions of react-native, we need to make sure we save the current profile when updating the FURN repo to a newer version of react-native. To do this, copy the current profile (in index.js) to a new file under the src folder named `furn-profile-X.Y.js` where X.Y is the current version of react-native (for example, `furn-profile-0.68.js`). Next, add this file to the list of profiles in update-profile.js after "[`${major}.${minor}`]: packages" (which lists the profile for the new version of react-native you're updating to). diff --git a/packages/dependency-profiles/update-profile.js b/packages/dependency-profiles/update-profile.js index 696364f48d..04bf4ae572 100644 --- a/packages/dependency-profiles/update-profile.js +++ b/packages/dependency-profiles/update-profile.js @@ -52,13 +52,17 @@ const { major, minor } = semver.coerce(devDependencies['react-native']); let profiles; +// When updating FURN to a new react-native version, save the profile for +// the current react-native version in index.js to a new file under src named +// "furn-profile-X.Y.js" and add that profile here. For example: +// +// profiles = { +// [`${major}.${minor}`]: packages, +// ...require('./src/furn-profile-0.68.js') +// }; + profiles = { [`${major}.${minor}`]: packages, - // When updating FURN to a new version of react-native, save the profile for - // the latest react-native version in index.js to a new file and add that - // profile here. For example: - // - // ...require('./src/furn-profile-0.68.js') }; const source = [