diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000..3ae136e59 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Set the default line ending behavior for text, in case people don't have core.autocrlf set. +* text=auto \ No newline at end of file diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index c72a5749c..f9ba8cf65 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,9 +1,9 @@ -# Microsoft Open Source Code of Conduct - -This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). - -Resources: - -- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) -- Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns +# Microsoft Open Source Code of Conduct + +This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). + +Resources: + +- [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) +- [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) +- Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns diff --git a/LICENSE b/LICENSE index 4b1ad51b2..21071075c 100644 --- a/LICENSE +++ b/LICENSE @@ -1,21 +1,21 @@ - MIT License - - Copyright (c) Microsoft Corporation. All rights reserved. - - 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 + MIT License + + Copyright (c) Microsoft Corporation. All rights reserved. + + 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 diff --git a/README.md b/README.md index 4574faa9f..c9cd49b69 100644 --- a/README.md +++ b/README.md @@ -1,84 +1,84 @@ -# FluentUI React Native - -FluentUI React Native is a javascript component library that provides developers with controls that are part of the [Fluent Design System](https://www.microsoft.com/design/fluent/). These controls are built on [React Native](https://reactnative.dev/) and fully customizable. - -## Getting Started - -If you have an existing React Native project, it's easy to begin using FluentUI React Native. If you need to setup a new React Native project, please see the [React Native Windows Getting Started documentation](https://microsoft.github.io/react-native-windows/docs/getting-started). - -### Prerequisites - -- [Standard React Native dependencies](http://facebook.github.io/react-native/docs/getting-started.html#node-python2-jdk) -- [Node.js](https://nodejs.org/en/download/) - -### Install FluentUI React Native into an existing project - -Navigate to the root folder of your project, and use npm to install the package: - -``` - npm i @fluentui/react-native -``` - -After successful installation, you can test the package by importing components at the top of your app's entry file, e.g. `App.js`: - -``` - import { Checkbox } from '@fluentui/react-native'; -``` - -Once you have the package installed, check out our [Hello World Fluent page](https://github.com/microsoft/fluent-site/blob/master/packages/fluent-website/docs/windows/get-started/Hello-World.mdx) to start writing code (Coming Soon). - -## Documentation - -### Components and Controls - -Our component documentation is hosted in a separate repository, [Microsoft FluentUI Site](https://github.com/Microsoft/fluent-site) that will be published to its own website (Coming Soon). - -### Theming framework - -Our FluentUI framework documentation is found in this repository alongside the implementation. - -- [Theming Overview](./packages/framework/theming-react-native/README.md) -- [StyleSheets](./packages/framework/themed-stylesheet/README.md) -- [Customizing Theme Settings](./packages/framework/themed-settings/README.md) -- [Theme Registry](./packages/framework/theme-registry/README.md) -- [Tokens](./packages/framework/foundation-tokens/README.md) -- [Settings and Slots](./packages/framework/foundation-settings/README.md) -- [Compose](./packages/framework/foundation-compose/README.md) and [Composable](./packages/framework/foundation-composable/README.md) - -## Developing in the repo - -### Yarn + Lerna - -This repo is set up as a monorepo using Lerna + Yarn workspaces. The yarn commands will trigger the lerna commands which will execute yarn commands in each package. To install yarn, please follow instructions in the [Yarn documentation](https://classic.yarnpkg.com/en/docs/install/). - -### Setup your development environment - -To start developing in the repository you can: - -1. `git clone https://github.com/microsoft/fluentui-react-native.git` -1. `cd fluentui-react-native` -1. `yarn` -1. `yarn build` - -After a successful yarn build, you can explore FluentUI Tester, our demo application to play with each of the controls. To run FluentUI Tester, please follow instructions in the [FluentUI Tester readme](./apps/fluent-tester/README.md). - -### Beachball - -This repo manages semantic versioning and publishing using [Beachball](https://github.com/microsoft/beachball). When contributing, make sure to run the following before making a pull request: - -1. `yarn change` will take you through a command line wizard to generate change files -2. Make sure to commit and push the newly generated change file - -## Contributing - -This project welcomes contributions and suggestions. Most contributions require you to agree to a -Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us -the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. - -When you submit a pull request, a CLA bot will automatically determine whether you need to provide -a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions -provided by the bot. You will only need to do this once across all repos using our CLA. - -This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). -For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or -contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. +# FluentUI React Native + +FluentUI React Native is a javascript component library that provides developers with controls that are part of the [Fluent Design System](https://www.microsoft.com/design/fluent/). These controls are built on [React Native](https://reactnative.dev/) and fully customizable. + +## Getting Started + +If you have an existing React Native project, it's easy to begin using FluentUI React Native. If you need to setup a new React Native project, please see the [React Native Windows Getting Started documentation](https://microsoft.github.io/react-native-windows/docs/getting-started). + +### Prerequisites + +- [Standard React Native dependencies](http://facebook.github.io/react-native/docs/getting-started.html#node-python2-jdk) +- [Node.js](https://nodejs.org/en/download/) + +### Install FluentUI React Native into an existing project + +Navigate to the root folder of your project, and use npm to install the package: + +``` + npm i @fluentui/react-native +``` + +After successful installation, you can test the package by importing components at the top of your app's entry file, e.g. `App.js`: + +``` + import { Checkbox } from '@fluentui/react-native'; +``` + +Once you have the package installed, check out our [Hello World Fluent page](https://github.com/microsoft/fluent-site/blob/master/packages/fluent-website/docs/windows/get-started/Hello-World.mdx) to start writing code (Coming Soon). + +## Documentation + +### Components and Controls + +Our component documentation is hosted in a separate repository, [Microsoft FluentUI Site](https://github.com/Microsoft/fluent-site) that will be published to its own website (Coming Soon). + +### Theming framework + +Our FluentUI framework documentation is found in this repository alongside the implementation. + +- [Theming Overview](./packages/framework/theming-react-native/README.md) +- [StyleSheets](./packages/framework/themed-stylesheet/README.md) +- [Customizing Theme Settings](./packages/framework/themed-settings/README.md) +- [Theme Registry](./packages/framework/theme-registry/README.md) +- [Tokens](./packages/framework/foundation-tokens/README.md) +- [Settings and Slots](./packages/framework/foundation-settings/README.md) +- [Compose](./packages/framework/foundation-compose/README.md) and [Composable](./packages/framework/foundation-composable/README.md) + +## Developing in the repo + +### Yarn + Lerna + +This repo is set up as a monorepo using Lerna + Yarn workspaces. The yarn commands will trigger the lerna commands which will execute yarn commands in each package. To install yarn, please follow instructions in the [Yarn documentation](https://classic.yarnpkg.com/en/docs/install/). + +### Setup your development environment + +To start developing in the repository you can: + +1. `git clone https://github.com/microsoft/fluentui-react-native.git` +1. `cd fluentui-react-native` +1. `yarn` +1. `yarn build` + +After a successful yarn build, you can explore FluentUI Tester, our demo application to play with each of the controls. To run FluentUI Tester, please follow instructions in the [FluentUI Tester readme](./apps/fluent-tester/README.md). + +### Beachball + +This repo manages semantic versioning and publishing using [Beachball](https://github.com/microsoft/beachball). When contributing, make sure to run the following before making a pull request: + +1. `yarn change` will take you through a command line wizard to generate change files +2. Make sure to commit and push the newly generated change file + +## Contributing + +This project welcomes contributions and suggestions. Most contributions require you to agree to a +Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us +the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com. + +When you submit a pull request, a CLA bot will automatically determine whether you need to provide +a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions +provided by the bot. You will only need to do this once across all repos using our CLA. + +This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). +For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or +contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/Assets.xcassets/AppIcon.appiconset/Contents.json b/apps/apple/FluentUITester/macos/FluentUITester-macOS/Assets.xcassets/AppIcon.appiconset/Contents.json index 2b5b2b0f3..3f00db43e 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/Assets.xcassets/AppIcon.appiconset/Contents.json +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/Assets.xcassets/AppIcon.appiconset/Contents.json @@ -1,58 +1,58 @@ -{ - "images" : [ - { - "idiom" : "mac", - "scale" : "1x", - "size" : "16x16" - }, - { - "idiom" : "mac", - "scale" : "2x", - "size" : "16x16" - }, - { - "idiom" : "mac", - "scale" : "1x", - "size" : "32x32" - }, - { - "idiom" : "mac", - "scale" : "2x", - "size" : "32x32" - }, - { - "idiom" : "mac", - "scale" : "1x", - "size" : "128x128" - }, - { - "idiom" : "mac", - "scale" : "2x", - "size" : "128x128" - }, - { - "idiom" : "mac", - "scale" : "1x", - "size" : "256x256" - }, - { - "idiom" : "mac", - "scale" : "2x", - "size" : "256x256" - }, - { - "idiom" : "mac", - "scale" : "1x", - "size" : "512x512" - }, - { - "idiom" : "mac", - "scale" : "2x", - "size" : "512x512" - } - ], - "info" : { - "author" : "xcode", - "version" : 1 - } -} +{ + "images" : [ + { + "idiom" : "mac", + "scale" : "1x", + "size" : "16x16" + }, + { + "idiom" : "mac", + "scale" : "2x", + "size" : "16x16" + }, + { + "idiom" : "mac", + "scale" : "1x", + "size" : "32x32" + }, + { + "idiom" : "mac", + "scale" : "2x", + "size" : "32x32" + }, + { + "idiom" : "mac", + "scale" : "1x", + "size" : "128x128" + }, + { + "idiom" : "mac", + "scale" : "2x", + "size" : "128x128" + }, + { + "idiom" : "mac", + "scale" : "1x", + "size" : "256x256" + }, + { + "idiom" : "mac", + "scale" : "2x", + "size" : "256x256" + }, + { + "idiom" : "mac", + "scale" : "1x", + "size" : "512x512" + }, + { + "idiom" : "mac", + "scale" : "2x", + "size" : "512x512" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/Assets.xcassets/Contents.json b/apps/apple/FluentUITester/macos/FluentUITester-macOS/Assets.xcassets/Contents.json index b2cf3951c..73c00596a 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/Assets.xcassets/Contents.json +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/Assets.xcassets/Contents.json @@ -1,6 +1,6 @@ -{ - "info" : { - "author" : "xcode", - "version" : 1 - } -} +{ + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNAppDelegate.h b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNAppDelegate.h index 7dd8c0375..47f4f2d39 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNAppDelegate.h +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNAppDelegate.h @@ -1,5 +1,5 @@ -#import - -@interface FRNAppDelegate : NSObject - -@end +#import + +@interface FRNAppDelegate : NSObject + +@end diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNAppDelegate.m b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNAppDelegate.m index 2e98b848e..740a5c38b 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNAppDelegate.m +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNAppDelegate.m @@ -1,5 +1,5 @@ -#import "FRNAppDelegate.h" - -@implementation FRNAppDelegate - -@end +#import "FRNAppDelegate.h" + +@implementation FRNAppDelegate + +@end diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNViewController.h b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNViewController.h index f32a45fb0..463b9fa09 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNViewController.h +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNViewController.h @@ -1,5 +1,5 @@ -#import - -@interface FRNViewController : NSViewController - -@end +#import + +@interface FRNViewController : NSViewController + +@end diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNViewController.m b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNViewController.m index 55c221c83..db2b4aea2 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNViewController.m +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FRNViewController.m @@ -1,28 +1,28 @@ -#import "FRNViewController.h" -#import "FRNAppDelegate.h" - -#import -#import -#import - -@interface FRNViewController () - -@end - -@implementation FRNViewController - -- (void)loadView { - // The delegate must conform to RCTBridgeDelegate to retrieve the JS source file for the packager - RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil]; - RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"FluentUITester" initialProperties:nil]; - - [self setView:rootView]; -} - -#pragma mark - RCTBridgeDelegate Methods - -- (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge { - return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:@"main"]; // .jsbundle; -} - -@end +#import "FRNViewController.h" +#import "FRNAppDelegate.h" + +#import +#import +#import + +@interface FRNViewController () + +@end + +@implementation FRNViewController + +- (void)loadView { + // The delegate must conform to RCTBridgeDelegate to retrieve the JS source file for the packager + RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil]; + RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"FluentUITester" initialProperties:nil]; + + [self setView:rootView]; +} + +#pragma mark - RCTBridgeDelegate Methods + +- (NSURL *)sourceURLForBridge:(__unused RCTBridge *)bridge { + return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:@"main"]; // .jsbundle; +} + +@end diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FluentUITester.entitlements b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FluentUITester.entitlements index 73cfd79dd..625af03d9 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/FluentUITester.entitlements +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/FluentUITester.entitlements @@ -1,12 +1,12 @@ - - - - - com.apple.security.app-sandbox - - com.apple.security.files.user-selected.read-only - - com.apple.security.network.client - - - + + + + + com.apple.security.app-sandbox + + com.apple.security.files.user-selected.read-only + + com.apple.security.network.client + + + diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/Info.plist b/apps/apple/FluentUITester/macos/FluentUITester-macOS/Info.plist index e7ddb8488..5c7ebb780 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/Info.plist +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/Info.plist @@ -1,47 +1,47 @@ - - - - - CFBundleDevelopmentRegion - $(DEVELOPMENT_LANGUAGE) - CFBundleExecutable - $(EXECUTABLE_NAME) - CFBundleIconFile - - CFBundleIdentifier - $(PRODUCT_BUNDLE_IDENTIFIER) - CFBundleInfoDictionaryVersion - 6.0 - CFBundleName - $(PRODUCT_NAME) - CFBundlePackageType - $(PRODUCT_BUNDLE_PACKAGE_TYPE) - CFBundleShortVersionString - 1.0 - CFBundleVersion - 1 - LSMinimumSystemVersion - $(MACOSX_DEPLOYMENT_TARGET) - NSAppTransportSecurity - - NSAllowsArbitraryLoads - - NSExceptionDomains - - localhost - - NSExceptionAllowsInsecureHTTPLoads - - - - - NSMainStoryboardFile - Main - NSPrincipalClass - NSApplication - NSSupportsAutomaticTermination - - NSSupportsSuddenTermination - - - + + + + + CFBundleDevelopmentRegion + $(DEVELOPMENT_LANGUAGE) + CFBundleExecutable + $(EXECUTABLE_NAME) + CFBundleIconFile + + CFBundleIdentifier + $(PRODUCT_BUNDLE_IDENTIFIER) + CFBundleInfoDictionaryVersion + 6.0 + CFBundleName + $(PRODUCT_NAME) + CFBundlePackageType + $(PRODUCT_BUNDLE_PACKAGE_TYPE) + CFBundleShortVersionString + 1.0 + CFBundleVersion + 1 + LSMinimumSystemVersion + $(MACOSX_DEPLOYMENT_TARGET) + NSAppTransportSecurity + + NSAllowsArbitraryLoads + + NSExceptionDomains + + localhost + + NSExceptionAllowsInsecureHTTPLoads + + + + + NSMainStoryboardFile + Main + NSPrincipalClass + NSApplication + NSSupportsAutomaticTermination + + NSSupportsSuddenTermination + + + diff --git a/apps/apple/FluentUITester/macos/FluentUITester-macOS/main.m b/apps/apple/FluentUITester/macos/FluentUITester-macOS/main.m index 18891ec36..3f29a6dae 100644 --- a/apps/apple/FluentUITester/macos/FluentUITester-macOS/main.m +++ b/apps/apple/FluentUITester/macos/FluentUITester-macOS/main.m @@ -1,5 +1,5 @@ -#import - -int main(int argc, const char *argv[]) { - return NSApplicationMain(argc, argv); -} +#import + +int main(int argc, const char *argv[]) { + return NSApplicationMain(argc, argv); +} diff --git a/apps/apple/FluentUITester/macos/Podfile b/apps/apple/FluentUITester/macos/Podfile index 6ee814de2..6c4cf825b 100644 --- a/apps/apple/FluentUITester/macos/Podfile +++ b/apps/apple/FluentUITester/macos/Podfile @@ -1,36 +1,36 @@ -# require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' - -abstract_target 'Shared' do - # use_native_modules! - - pod 'React', :path => "../node_modules/react-native-macos/" - pod 'React-Core', :path => "../node_modules/react-native-macos/React" - pod 'React-fishhook', :path => "../node_modules/react-native-macos/Libraries/fishhook" - pod 'React-RCTActionSheet', :path => "../node_modules/react-native-macos/Libraries/ActionSheetIOS" - pod 'React-RCTAnimation', :path => "../node_modules/react-native-macos/Libraries/NativeAnimation" - pod 'React-RCTBlob', :path => "../node_modules/react-native-macos/Libraries/Blob" - pod 'React-RCTImage', :path => "../node_modules/react-native-macos/Libraries/Image" - pod 'React-RCTLinking', :path => "../node_modules/react-native-macos/Libraries/LinkingIOS" - pod 'React-RCTNetwork', :path => "../node_modules/react-native-macos/Libraries/Network" - pod 'React-RCTSettings', :path => "../node_modules/react-native-macos/Libraries/Settings" - pod 'React-RCTText', :path => "../node_modules/react-native-macos/Libraries/Text" - pod 'React-RCTVibration', :path => "../node_modules/react-native-macos/Libraries/Vibration" - pod 'React-RCTWebSocket', :path => "../node_modules/react-native-macos/Libraries/WebSocket" - pod 'React-cxxreact', :path => "../node_modules/react-native-macos/ReactCommon/cxxreact" - pod 'React-jscallinvoker', :path => "../node_modules/react-native-macos/ReactCommon/jscallinvoker" - pod 'React-jsi', :path => "../node_modules/react-native-macos/ReactCommon/jsi" - pod 'React-jsiexecutor', :path => "../node_modules/react-native-macos/ReactCommon/jsiexecutor" - pod 'React-jsinspector', :path => "../node_modules/react-native-macos/ReactCommon/jsinspector" - pod 'yoga', :path => "../node_modules/react-native-macos/ReactCommon/yoga" - pod 'DoubleConversion', :podspec => "../node_modules/react-native-macos/third-party-podspecs/DoubleConversion.podspec" - pod 'glog', :podspec => "../node_modules/react-native-macos/third-party-podspecs/glog.podspec" - pod 'Folly', :podspec => "../node_modules/react-native-macos/third-party-podspecs/Folly.podspec" - pod 'boost-for-react-native', :podspec => "../node_modules/react-native-macos/third-party-podspecs/boost-for-react-native.podspec" - pod 'React-DevSupport', :path => "../node_modules/react-native-macos/React" - - target 'FluentUITester-macOS' do - platform :macos, '10.15' - # Pods specifically for macOS target - end - -end +# require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' + +abstract_target 'Shared' do + # use_native_modules! + + pod 'React', :path => "../node_modules/react-native-macos/" + pod 'React-Core', :path => "../node_modules/react-native-macos/React" + pod 'React-fishhook', :path => "../node_modules/react-native-macos/Libraries/fishhook" + pod 'React-RCTActionSheet', :path => "../node_modules/react-native-macos/Libraries/ActionSheetIOS" + pod 'React-RCTAnimation', :path => "../node_modules/react-native-macos/Libraries/NativeAnimation" + pod 'React-RCTBlob', :path => "../node_modules/react-native-macos/Libraries/Blob" + pod 'React-RCTImage', :path => "../node_modules/react-native-macos/Libraries/Image" + pod 'React-RCTLinking', :path => "../node_modules/react-native-macos/Libraries/LinkingIOS" + pod 'React-RCTNetwork', :path => "../node_modules/react-native-macos/Libraries/Network" + pod 'React-RCTSettings', :path => "../node_modules/react-native-macos/Libraries/Settings" + pod 'React-RCTText', :path => "../node_modules/react-native-macos/Libraries/Text" + pod 'React-RCTVibration', :path => "../node_modules/react-native-macos/Libraries/Vibration" + pod 'React-RCTWebSocket', :path => "../node_modules/react-native-macos/Libraries/WebSocket" + pod 'React-cxxreact', :path => "../node_modules/react-native-macos/ReactCommon/cxxreact" + pod 'React-jscallinvoker', :path => "../node_modules/react-native-macos/ReactCommon/jscallinvoker" + pod 'React-jsi', :path => "../node_modules/react-native-macos/ReactCommon/jsi" + pod 'React-jsiexecutor', :path => "../node_modules/react-native-macos/ReactCommon/jsiexecutor" + pod 'React-jsinspector', :path => "../node_modules/react-native-macos/ReactCommon/jsinspector" + pod 'yoga', :path => "../node_modules/react-native-macos/ReactCommon/yoga" + pod 'DoubleConversion', :podspec => "../node_modules/react-native-macos/third-party-podspecs/DoubleConversion.podspec" + pod 'glog', :podspec => "../node_modules/react-native-macos/third-party-podspecs/glog.podspec" + pod 'Folly', :podspec => "../node_modules/react-native-macos/third-party-podspecs/Folly.podspec" + pod 'boost-for-react-native', :podspec => "../node_modules/react-native-macos/third-party-podspecs/boost-for-react-native.podspec" + pod 'React-DevSupport', :path => "../node_modules/react-native-macos/React" + + target 'FluentUITester-macOS' do + platform :macos, '10.15' + # Pods specifically for macOS target + end + +end diff --git a/apps/apple/FluentUITester/metro.config.macos.js b/apps/apple/FluentUITester/metro.config.macos.js index f34e24e85..4cc9cd1db 100644 --- a/apps/apple/FluentUITester/metro.config.macos.js +++ b/apps/apple/FluentUITester/metro.config.macos.js @@ -1,19 +1,19 @@ -/** - * This cli config is needed for development purposes, e.g. for running - * integration tests during local development or on CI services. - */ - -const path = require('path'); -const blacklist = require('metro-config/src/defaults/blacklist'); - -const rnmPath = path.resolve(__dirname, 'node_modules/react-native-macos'); - -module.exports = { - resolver: { - extraNodeModules: { - 'react-native': rnmPath, - }, - platforms: ['macos', 'ios'], - blacklistRE: blacklist([/node_modules\/react-native\/.*/]), - }, -}; +/** + * This cli config is needed for development purposes, e.g. for running + * integration tests during local development or on CI services. + */ + +const path = require('path'); +const blacklist = require('metro-config/src/defaults/blacklist'); + +const rnmPath = path.resolve(__dirname, 'node_modules/react-native-macos'); + +module.exports = { + resolver: { + extraNodeModules: { + 'react-native': rnmPath, + }, + platforms: ['macos', 'ios'], + blacklistRE: blacklist([/node_modules\/react-native\/.*/]), + }, +}; diff --git a/apps/apple/FluentUITester/react-native.config.js b/apps/apple/FluentUITester/react-native.config.js index 256d55d0f..6c6da53c7 100644 --- a/apps/apple/FluentUITester/react-native.config.js +++ b/apps/apple/FluentUITester/react-native.config.js @@ -1,33 +1,33 @@ -/** - * This cli config is needed for the coexistance of react-native and other - * out-of-tree implementations such react-native-macos. - * The following issue is tracked by - * https://github.com/react-native-community/discussions-and-proposals/issues/182 - * - * The work-around involves having a metro.config.js for each out-of-tree - * platform, i.e. metro.config.js for react-native and - * metro.config.macos.js for react-native-macos. - * This react-native.config.js looks for a --use-react-native-macos - * switch and when present pushes --config=metro.config.macos.js - * and specifies reactNativePath: 'node_modules/react-native-macos'. - * The metro.config.js has to blacklist 'node_modules/react-native-macos', - * and conversely metro.config.macos.js has to blacklist 'node_modules/react-native'. - */ -'use strict'; - -const macSwitch = '--use-react-native-macos'; -const windowsSwitch = '--use-react-native-windows'; - -if (process.argv.includes(macSwitch)) { - process.argv = process.argv.filter(arg => arg !== macSwitch); - process.argv.push('--config=metro.config.macos.js'); - module.exports = { - reactNativePath: 'node_modules/react-native-macos', - }; -} else if (process.argv.includes(windowsSwitch)) { - process.argv = process.argv.filter(arg => arg !== windowsSwitch); - process.argv.push('--config=metro.config.windows.js'); - module.exports = { - reactNativePath: 'node_modules/react-native-windows', - }; -} +/** + * This cli config is needed for the coexistance of react-native and other + * out-of-tree implementations such react-native-macos. + * The following issue is tracked by + * https://github.com/react-native-community/discussions-and-proposals/issues/182 + * + * The work-around involves having a metro.config.js for each out-of-tree + * platform, i.e. metro.config.js for react-native and + * metro.config.macos.js for react-native-macos. + * This react-native.config.js looks for a --use-react-native-macos + * switch and when present pushes --config=metro.config.macos.js + * and specifies reactNativePath: 'node_modules/react-native-macos'. + * The metro.config.js has to blacklist 'node_modules/react-native-macos', + * and conversely metro.config.macos.js has to blacklist 'node_modules/react-native'. + */ +'use strict'; + +const macSwitch = '--use-react-native-macos'; +const windowsSwitch = '--use-react-native-windows'; + +if (process.argv.includes(macSwitch)) { + process.argv = process.argv.filter(arg => arg !== macSwitch); + process.argv.push('--config=metro.config.macos.js'); + module.exports = { + reactNativePath: 'node_modules/react-native-macos', + }; +} else if (process.argv.includes(windowsSwitch)) { + process.argv = process.argv.filter(arg => arg !== windowsSwitch); + process.argv.push('--config=metro.config.windows.js'); + module.exports = { + reactNativePath: 'node_modules/react-native-windows', + }; +} diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Common/AlignmentPicker.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Common/AlignmentPicker.tsx index a4b3be7a1..46e332d49 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Common/AlignmentPicker.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Common/AlignmentPicker.tsx @@ -1,28 +1,28 @@ -import * as React from 'react'; -import { undefinedText } from '../PersonaCoin/styles'; -import { IconAlignment } from '@fluentui/react-native'; -import { Picker, StyleProp, ViewStyle } from 'react-native'; - -const alignmentValues: Array = [undefinedText, 'start', 'center', 'end']; - -interface IAlignmentPickerProps { - style?: StyleProp; - label: string; - onSelectionChange: (value: IconAlignment | undefined) => void; -} - -export const AlignmentPicker: React.FunctionComponent = (props: IAlignmentPickerProps) => { - const { label, onSelectionChange, style } = props; - return ( - onSelectionChange(index == 0 ? undefined : value)} - > - {alignmentValues.map((alignment, index) => ( - - ))} - - ); -}; +import * as React from 'react'; +import { undefinedText } from '../PersonaCoin/styles'; +import { IconAlignment } from '@fluentui/react-native'; +import { Picker, StyleProp, ViewStyle } from 'react-native'; + +const alignmentValues: Array = [undefinedText, 'start', 'center', 'end']; + +interface IAlignmentPickerProps { + style?: StyleProp; + label: string; + onSelectionChange: (value: IconAlignment | undefined) => void; +} + +export const AlignmentPicker: React.FunctionComponent = (props: IAlignmentPickerProps) => { + const { label, onSelectionChange, style } = props; + return ( + onSelectionChange(index == 0 ? undefined : value)} + > + {alignmentValues.map((alignment, index) => ( + + ))} + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Common/Slider.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Common/Slider.tsx index 8432a2214..0d0d74af0 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Common/Slider.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Common/Slider.tsx @@ -1,168 +1,168 @@ -import * as React from 'react'; -import { ViewProps, StyleSheet, StyleProp, ViewStyle, UIManager, Text, findNodeHandle, View } from 'react-native'; -import { Separator, Pressable, IPressableState } from '@fluentui/react-native'; - -const thumbSize = 20; -const defaultMaximumValue = 100; -const defaultMinimumValue = 1; - -interface ISliderProps extends ViewProps { - minimum?: number; - maximum?: number; - initialValue?: number; - onChange?: (value: number) => void; -} - -const styles = StyleSheet.create({ - root: { - flexDirection: 'row', - alignItems: 'center' - }, - slider: { - minWidth: thumbSize * 2, - flexDirection: 'row', - alignItems: 'center', - alignContent: 'stretch', - height: thumbSize, - width: 200 - }, - track: { - flexGrow: 1 - }, - thumb: { - width: thumbSize, - height: thumbSize, - borderRadius: thumbSize, - borderWidth: 2, - borderColor: '#7A7574', - backgroundColor: '#FFFFFF', - position: 'absolute' - }, - label: { - margin: 8, - fontSize: 12 - } -}); - -const Track = Separator.customize({ tokens: { separatorWidth: 4 } }); - -function onThumbRenderStyle(state: IPressableState, thumbLocation: number): StyleProp { - return { - ...styles.thumb, - borderColor: state.pressed ? 'black' : state.hovered ? 'red' : '#7A7574', - marginLeft: thumbLocation - }; -} - -function calculateThumbLocationAndValue( - startTouchThumbLocation: number, - startTouchPosition: number, - currentTouchPosition: number, - trackLength: number, - minimum: number, - maximum: number -): [number, number] { - let newThumbLocation = startTouchThumbLocation + currentTouchPosition - startTouchPosition; - newThumbLocation = Math.max(0, newThumbLocation); - newThumbLocation = Math.min(newThumbLocation, trackLength); - - const newValue = minimum + (newThumbLocation / trackLength) * (maximum - minimum); - const intValue = Math.min(maximum, Math.floor(newValue + 0.3)); // snap to nearest integer value - newThumbLocation = (trackLength * (intValue - minimum)) / (maximum - minimum); - - return [newThumbLocation, intValue]; -} - -function verifyProps(initialValue: number, minimum: number, maximum: number) { - if (minimum >= maximum) { - throw new Error(`'minimum' must not be greater than or equal 'maximum'.`); - } - - if (initialValue < minimum) { - throw new Error(`'initialValue' must not be less than 'minimum'.`); - } - - if (initialValue > maximum) { - throw new Error(`'initialValue' must not be greater than 'maximum'.`); - } -} - -export const Slider: React.FunctionComponent = (props: ISliderProps) => { - let { minimum, maximum, initialValue } = props; - minimum = minimum || defaultMinimumValue; - maximum = maximum || defaultMaximumValue; - initialValue = initialValue || minimum; - verifyProps(initialValue, minimum, maximum); - - const { style: userStyle, onChange } = props; - - const [thumbLocation, setThumbLocation] = React.useState(0); - - const startTouchPosition = React.useRef(-1); - const startTouchThumbLocation = React.useRef(-1); - const trackLength = React.useRef(-1); - const sliderValue = React.useRef(initialValue); - - const ref = React.useRef(null); - - React.useEffect(() => { - const parent = findNodeHandle(ref.current); - if (parent) { - UIManager.measure(parent, (_x, _y, width) => { - if (width <= 0) { - return; - } - - // track length is the entire view width subtracted by the thumb size. - trackLength.current = Math.max(0, width - thumbSize); - - const initialThumbLocation = (trackLength.current * (initialValue! - minimum!)) / (maximum! - minimum!); - setThumbLocation(initialThumbLocation); - }); - } - }, [ref.current, initialValue, maximum, minimum]); - - return ( - - - - {trackLength.current > 0 && ( - onThumbRenderStyle(state, thumbLocation)} - onStartShouldSetResponder={() => trackLength.current > 0} - onResponderStart={e => { - startTouchPosition.current = e.nativeEvent.pageX; - startTouchThumbLocation.current = thumbLocation; - }} - onResponderMove={e => { - if (startTouchPosition.current !== -1 && trackLength.current > 0) { - const [newThumbLocation, newValue] = calculateThumbLocationAndValue( - startTouchThumbLocation.current, - startTouchPosition.current, - e.nativeEvent.pageX, - trackLength.current, - minimum || defaultMinimumValue, - maximum || defaultMaximumValue - ); - - sliderValue.current = newValue; - setThumbLocation(newThumbLocation); - } - }} - onResponderEnd={() => { - startTouchPosition.current = -1; - startTouchThumbLocation.current = -1; - }} - onResponderRelease={() => { - if (onChange) { - onChange(sliderValue.current); - } - }} - /> - )} - - - {sliderValue.current} - - ); -}; +import * as React from 'react'; +import { ViewProps, StyleSheet, StyleProp, ViewStyle, UIManager, Text, findNodeHandle, View } from 'react-native'; +import { Separator, Pressable, IPressableState } from '@fluentui/react-native'; + +const thumbSize = 20; +const defaultMaximumValue = 100; +const defaultMinimumValue = 1; + +interface ISliderProps extends ViewProps { + minimum?: number; + maximum?: number; + initialValue?: number; + onChange?: (value: number) => void; +} + +const styles = StyleSheet.create({ + root: { + flexDirection: 'row', + alignItems: 'center' + }, + slider: { + minWidth: thumbSize * 2, + flexDirection: 'row', + alignItems: 'center', + alignContent: 'stretch', + height: thumbSize, + width: 200 + }, + track: { + flexGrow: 1 + }, + thumb: { + width: thumbSize, + height: thumbSize, + borderRadius: thumbSize, + borderWidth: 2, + borderColor: '#7A7574', + backgroundColor: '#FFFFFF', + position: 'absolute' + }, + label: { + margin: 8, + fontSize: 12 + } +}); + +const Track = Separator.customize({ tokens: { separatorWidth: 4 } }); + +function onThumbRenderStyle(state: IPressableState, thumbLocation: number): StyleProp { + return { + ...styles.thumb, + borderColor: state.pressed ? 'black' : state.hovered ? 'red' : '#7A7574', + marginLeft: thumbLocation + }; +} + +function calculateThumbLocationAndValue( + startTouchThumbLocation: number, + startTouchPosition: number, + currentTouchPosition: number, + trackLength: number, + minimum: number, + maximum: number +): [number, number] { + let newThumbLocation = startTouchThumbLocation + currentTouchPosition - startTouchPosition; + newThumbLocation = Math.max(0, newThumbLocation); + newThumbLocation = Math.min(newThumbLocation, trackLength); + + const newValue = minimum + (newThumbLocation / trackLength) * (maximum - minimum); + const intValue = Math.min(maximum, Math.floor(newValue + 0.3)); // snap to nearest integer value + newThumbLocation = (trackLength * (intValue - minimum)) / (maximum - minimum); + + return [newThumbLocation, intValue]; +} + +function verifyProps(initialValue: number, minimum: number, maximum: number) { + if (minimum >= maximum) { + throw new Error(`'minimum' must not be greater than or equal 'maximum'.`); + } + + if (initialValue < minimum) { + throw new Error(`'initialValue' must not be less than 'minimum'.`); + } + + if (initialValue > maximum) { + throw new Error(`'initialValue' must not be greater than 'maximum'.`); + } +} + +export const Slider: React.FunctionComponent = (props: ISliderProps) => { + let { minimum, maximum, initialValue } = props; + minimum = minimum || defaultMinimumValue; + maximum = maximum || defaultMaximumValue; + initialValue = initialValue || minimum; + verifyProps(initialValue, minimum, maximum); + + const { style: userStyle, onChange } = props; + + const [thumbLocation, setThumbLocation] = React.useState(0); + + const startTouchPosition = React.useRef(-1); + const startTouchThumbLocation = React.useRef(-1); + const trackLength = React.useRef(-1); + const sliderValue = React.useRef(initialValue); + + const ref = React.useRef(null); + + React.useEffect(() => { + const parent = findNodeHandle(ref.current); + if (parent) { + UIManager.measure(parent, (_x, _y, width) => { + if (width <= 0) { + return; + } + + // track length is the entire view width subtracted by the thumb size. + trackLength.current = Math.max(0, width - thumbSize); + + const initialThumbLocation = (trackLength.current * (initialValue! - minimum!)) / (maximum! - minimum!); + setThumbLocation(initialThumbLocation); + }); + } + }, [ref.current, initialValue, maximum, minimum]); + + return ( + + + + {trackLength.current > 0 && ( + onThumbRenderStyle(state, thumbLocation)} + onStartShouldSetResponder={() => trackLength.current > 0} + onResponderStart={e => { + startTouchPosition.current = e.nativeEvent.pageX; + startTouchThumbLocation.current = thumbLocation; + }} + onResponderMove={e => { + if (startTouchPosition.current !== -1 && trackLength.current > 0) { + const [newThumbLocation, newValue] = calculateThumbLocationAndValue( + startTouchThumbLocation.current, + startTouchPosition.current, + e.nativeEvent.pageX, + trackLength.current, + minimum || defaultMinimumValue, + maximum || defaultMaximumValue + ); + + sliderValue.current = newValue; + setThumbLocation(newThumbLocation); + } + }} + onResponderEnd={() => { + startTouchPosition.current = -1; + startTouchThumbLocation.current = -1; + }} + onResponderRelease={() => { + if (onChange) { + onChange(sliderValue.current); + } + }} + /> + )} + + + {sliderValue.current} + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Common/styles.ts b/apps/fluent-tester/src/RNTester/TestComponents/Common/styles.ts index 0a33b67c5..61ebedbdc 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Common/styles.ts +++ b/apps/fluent-tester/src/RNTester/TestComponents/Common/styles.ts @@ -1,116 +1,116 @@ -import { StyleSheet } from 'react-native'; -import { IStackProps } from '@fluentui-react-native/stack'; - -export const commonTestStyles = StyleSheet.create({ - root: { - marginTop: 16, - marginRight: 32, - flexDirection: 'row', - alignItems: 'flex-start' - }, - header: { - marginVertical: 6, - fontSize: 12 - }, - section: { - fontSize: 15, - fontWeight: 'bold', - color: '#0B6A0B', - marginTop: 12 - }, - separatorStack: { - height: 200, - flexDirection: 'row', - justifyContent: 'space-evenly' - }, - settings: { - flexGrow: 1 - }, - slider: { - marginVertical: 6 - }, - stack: { - borderWidth: 2, - borderColor: '#bdbdbd', - padding: 12, - margin: 8 - }, - switch: { - flexDirection: 'row', - alignItems: 'center' - }, - textBox: { - borderWidth: 1, - height: 25, - fontSize: 12, - width: 150, - marginBottom: 8 - }, - view: { - minHeight: 200, - justifyContent: 'space-between' - } -}); - -export const fabricTesterStyles = StyleSheet.create({ - root: { - flex: 1, - flexGrow: 1, - flexDirection: 'row', - minHeight: 550, - minWidth: 300, - justifyContent: 'flex-start', - alignItems: 'stretch', - padding: 4 - }, - - testHeader: { - marginBottom: 8, - fontSize: 14, - fontWeight: 'bold' - }, - - testList: { - width: 160 - }, - - testListContainerStyle: { - flexDirection: 'column', - alignItems: 'stretch' - }, - - testListItem: { - width: 150 - }, - - testSection: { - fontSize: 15, - fontWeight: 'bold', - color: '#0B6A0B', - marginTop: 12 - }, - - separator: { - marginHorizontal: 8, - width: 2 - }, - - noTest: { - alignSelf: 'center', - fontSize: 14 - } -}); - -export const stackStyle: IStackProps['style'] = { - borderWidth: 1, - borderColor: '#bdbdbd', - paddingVertical: 8, - paddingHorizontal: 12, - margin: 8 -}; - -export const separatorStackStyle: IStackProps['style'] = { - height: 200, - flexDirection: 'row', - justifyContent: 'space-evenly' -}; +import { StyleSheet } from 'react-native'; +import { IStackProps } from '@fluentui-react-native/stack'; + +export const commonTestStyles = StyleSheet.create({ + root: { + marginTop: 16, + marginRight: 32, + flexDirection: 'row', + alignItems: 'flex-start' + }, + header: { + marginVertical: 6, + fontSize: 12 + }, + section: { + fontSize: 15, + fontWeight: 'bold', + color: '#0B6A0B', + marginTop: 12 + }, + separatorStack: { + height: 200, + flexDirection: 'row', + justifyContent: 'space-evenly' + }, + settings: { + flexGrow: 1 + }, + slider: { + marginVertical: 6 + }, + stack: { + borderWidth: 2, + borderColor: '#bdbdbd', + padding: 12, + margin: 8 + }, + switch: { + flexDirection: 'row', + alignItems: 'center' + }, + textBox: { + borderWidth: 1, + height: 25, + fontSize: 12, + width: 150, + marginBottom: 8 + }, + view: { + minHeight: 200, + justifyContent: 'space-between' + } +}); + +export const fabricTesterStyles = StyleSheet.create({ + root: { + flex: 1, + flexGrow: 1, + flexDirection: 'row', + minHeight: 550, + minWidth: 300, + justifyContent: 'flex-start', + alignItems: 'stretch', + padding: 4 + }, + + testHeader: { + marginBottom: 8, + fontSize: 14, + fontWeight: 'bold' + }, + + testList: { + width: 160 + }, + + testListContainerStyle: { + flexDirection: 'column', + alignItems: 'stretch' + }, + + testListItem: { + width: 150 + }, + + testSection: { + fontSize: 15, + fontWeight: 'bold', + color: '#0B6A0B', + marginTop: 12 + }, + + separator: { + marginHorizontal: 8, + width: 2 + }, + + noTest: { + alignSelf: 'center', + fontSize: 14 + } +}); + +export const stackStyle: IStackProps['style'] = { + borderWidth: 1, + borderColor: '#bdbdbd', + paddingVertical: 8, + paddingHorizontal: 12, + margin: 8 +}; + +export const separatorStackStyle: IStackProps['style'] = { + height: 200, + flexDirection: 'row', + justifyContent: 'space-evenly' +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Persona/CustomizeUsage.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Persona/CustomizeUsage.tsx index 20022249f..07503d4ae 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Persona/CustomizeUsage.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Persona/CustomizeUsage.tsx @@ -1,114 +1,114 @@ -import * as React from 'react'; -import { View, Text, Switch, TextInput } from 'react-native'; -import { IPersonaTokens, Persona } from '@fluentui/react-native'; -import { michaelImageUrl } from './styles'; -import { commonTestStyles as commonStyles } from '../Common/styles'; -import { useTheme } from '@uifabricshared/theming-react-native'; -import { Slider } from '../Common/Slider'; - -export const CustomizeUsage: React.FunctionComponent<{}> = () => { - const [showImage, setShowImage] = React.useState(true); - const [coinColor, setCoinColor] = React.useState(); - const [textColor, setTextColor] = React.useState(); - - const [textSize, setTextSize] = React.useState(23); - const [secondarySize, setSecondarySize] = React.useState(20); - const [tertiarySize, setTertiarySize] = React.useState(17); - const [optionalSize, setOptionalSize] = React.useState(14); - - const [horizontalGap, setHorizontalGap] = React.useState(); - const [verticalGap, setVerticalGap] = React.useState(); - - const tokens: Partial = {}; - if (coinColor) { - tokens.coinBackgroundColor = coinColor; - } - if (textColor) { - tokens.color = textColor; - } - if (textSize) { - tokens.textFont = { fontSize: textSize }; - } - if (secondarySize) { - tokens.secondaryFont = { fontSize: secondarySize }; - } - if (tertiarySize) { - tokens.tertiaryFont = { fontSize: tertiarySize }; - } - if (optionalSize) { - tokens.optionalFont = { fontSize: optionalSize }; - } - if (horizontalGap !== undefined) { - tokens.horizontalGap = horizontalGap; - } - if (verticalGap !== undefined) { - tokens.verticalGap = verticalGap; - } - - const theme = useTheme(); - const textBoxBorderStyle = { - borderColor: theme.colors.inputBorder - }; - - const CustomizedPersona = Persona.customize({ tokens }); - return ( - - {/* settings */} - - - Show image - - - - { - setCoinColor(e.nativeEvent.text); - }} - /> - - { - setTextColor(e.nativeEvent.text); - }} - /> - - Primary text size - - - Secondary text size - - - Tertiary text size - - - Optional text size - - - Horizontal gap - - - Vertical gap - - - - {/* component under test */} - - - ); -}; +import * as React from 'react'; +import { View, Text, Switch, TextInput } from 'react-native'; +import { IPersonaTokens, Persona } from '@fluentui/react-native'; +import { michaelImageUrl } from './styles'; +import { commonTestStyles as commonStyles } from '../Common/styles'; +import { useTheme } from '@uifabricshared/theming-react-native'; +import { Slider } from '../Common/Slider'; + +export const CustomizeUsage: React.FunctionComponent<{}> = () => { + const [showImage, setShowImage] = React.useState(true); + const [coinColor, setCoinColor] = React.useState(); + const [textColor, setTextColor] = React.useState(); + + const [textSize, setTextSize] = React.useState(23); + const [secondarySize, setSecondarySize] = React.useState(20); + const [tertiarySize, setTertiarySize] = React.useState(17); + const [optionalSize, setOptionalSize] = React.useState(14); + + const [horizontalGap, setHorizontalGap] = React.useState(); + const [verticalGap, setVerticalGap] = React.useState(); + + const tokens: Partial = {}; + if (coinColor) { + tokens.coinBackgroundColor = coinColor; + } + if (textColor) { + tokens.color = textColor; + } + if (textSize) { + tokens.textFont = { fontSize: textSize }; + } + if (secondarySize) { + tokens.secondaryFont = { fontSize: secondarySize }; + } + if (tertiarySize) { + tokens.tertiaryFont = { fontSize: tertiarySize }; + } + if (optionalSize) { + tokens.optionalFont = { fontSize: optionalSize }; + } + if (horizontalGap !== undefined) { + tokens.horizontalGap = horizontalGap; + } + if (verticalGap !== undefined) { + tokens.verticalGap = verticalGap; + } + + const theme = useTheme(); + const textBoxBorderStyle = { + borderColor: theme.colors.inputBorder + }; + + const CustomizedPersona = Persona.customize({ tokens }); + return ( + + {/* settings */} + + + Show image + + + + { + setCoinColor(e.nativeEvent.text); + }} + /> + + { + setTextColor(e.nativeEvent.text); + }} + /> + + Primary text size + + + Secondary text size + + + Tertiary text size + + + Optional text size + + + Horizontal gap + + + Vertical gap + + + + {/* component under test */} + + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Persona/PersonaTest.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Persona/PersonaTest.tsx index 3b72c6771..28983a517 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Persona/PersonaTest.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Persona/PersonaTest.tsx @@ -1,20 +1,20 @@ -import * as React from 'react'; -import { View } from 'react-native'; -import { Separator, Text } from '@fluentui/react-native'; -import { commonTestStyles } from '../Common/styles'; -import { StandardUsage } from './StandardUsage'; -import { CustomizeUsage } from './CustomizeUsage'; - -export const PersonaTest: React.FunctionComponent<{}> = () => { - return ( - - Standard Usage - - - - Customize Usage - - - - ); -}; +import * as React from 'react'; +import { View } from 'react-native'; +import { Separator, Text } from '@fluentui/react-native'; +import { commonTestStyles } from '../Common/styles'; +import { StandardUsage } from './StandardUsage'; +import { CustomizeUsage } from './CustomizeUsage'; + +export const PersonaTest: React.FunctionComponent<{}> = () => { + return ( + + Standard Usage + + + + Customize Usage + + + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Persona/StandardUsage.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Persona/StandardUsage.tsx index 7b1e2caca..7b4accb2d 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Persona/StandardUsage.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Persona/StandardUsage.tsx @@ -1,82 +1,82 @@ -import * as React from 'react'; -import { Persona, PersonaSize } from '@fluentui/react-native'; -import { rajeshImageUrl } from './styles'; -import { commonTestStyles as commonStyles } from '../Common/styles'; -import { View, Text, Switch, Picker } from 'react-native'; -import { undefinedText } from '../PersonaCoin/styles'; - -type WithUndefined = T | typeof undefinedText; - -const allSizes: WithUndefined[] = [ - undefinedText, - 'size8', - 'size24', - 'size32', - 'size40', - 'size48', - 'size56', - 'size72', - 'size100', - 'size120' -]; - -interface ISwitchWithLabelProps { - label: string; - value: boolean; - onValueChange: (value: boolean) => void; -} - -function SwitchWithLabel(props: ISwitchWithLabelProps): React.ReactElement { - const { label, value, onValueChange } = props; - return ( - - {label} - - - ); -} - -export const StandardUsage: React.FunctionComponent<{}> = () => { - const [showImage, setShowImage] = React.useState(true); - const [showPrimary, setShowPrimary] = React.useState(true); - const [showSecondary, setShowSecondary] = React.useState(true); - const [showTertiary, setShowTertiary] = React.useState(true); - const [showOptional, setShowOptional] = React.useState(true); - const [imageSize, setImageSize] = React.useState('size72'); - - return ( - - {/* settings */} - - - - - - - - setImageSize(size === undefinedText ? undefined : size)} - > - {allSizes.map((size, index) => ( - - ))} - - - - - - ); -}; +import * as React from 'react'; +import { Persona, PersonaSize } from '@fluentui/react-native'; +import { rajeshImageUrl } from './styles'; +import { commonTestStyles as commonStyles } from '../Common/styles'; +import { View, Text, Switch, Picker } from 'react-native'; +import { undefinedText } from '../PersonaCoin/styles'; + +type WithUndefined = T | typeof undefinedText; + +const allSizes: WithUndefined[] = [ + undefinedText, + 'size8', + 'size24', + 'size32', + 'size40', + 'size48', + 'size56', + 'size72', + 'size100', + 'size120' +]; + +interface ISwitchWithLabelProps { + label: string; + value: boolean; + onValueChange: (value: boolean) => void; +} + +function SwitchWithLabel(props: ISwitchWithLabelProps): React.ReactElement { + const { label, value, onValueChange } = props; + return ( + + {label} + + + ); +} + +export const StandardUsage: React.FunctionComponent<{}> = () => { + const [showImage, setShowImage] = React.useState(true); + const [showPrimary, setShowPrimary] = React.useState(true); + const [showSecondary, setShowSecondary] = React.useState(true); + const [showTertiary, setShowTertiary] = React.useState(true); + const [showOptional, setShowOptional] = React.useState(true); + const [imageSize, setImageSize] = React.useState('size72'); + + return ( + + {/* settings */} + + + + + + + + setImageSize(size === undefinedText ? undefined : size)} + > + {allSizes.map((size, index) => ( + + ))} + + + + + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Persona/styles.ts b/apps/fluent-tester/src/RNTester/TestComponents/Persona/styles.ts index 89b3dbf79..01522421f 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Persona/styles.ts +++ b/apps/fluent-tester/src/RNTester/TestComponents/Persona/styles.ts @@ -1,6 +1,6 @@ -export * from '../PersonaCoin/styles'; - -export const rajeshImageUrl = - 'https://3er1viui9wo30pkxh1v2nh4w-wpengine.netdna-ssl.com/wp-content/uploads/prod/2016/09/Rajesh-BW-Square.jpg'; - -export const michaelImageUrl = 'http://www.rap-up.com/app/uploads/2014/12/michael-jackson.jpg'; +export * from '../PersonaCoin/styles'; + +export const rajeshImageUrl = + 'https://3er1viui9wo30pkxh1v2nh4w-wpengine.netdna-ssl.com/wp-content/uploads/prod/2016/09/Rajesh-BW-Square.jpg'; + +export const michaelImageUrl = 'http://www.rap-up.com/app/uploads/2014/12/michael-jackson.jpg'; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/CustomizeUsage.tsx b/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/CustomizeUsage.tsx index 86fc5c5bc..63d3e7114 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/CustomizeUsage.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/CustomizeUsage.tsx @@ -1,99 +1,99 @@ -import * as React from 'react'; -import { PersonaCoin, IconAlignment, IPersonaCoinTokens } from '@fluentui/react-native'; -import { Switch, View, Text, TextInput } from 'react-native'; -import { Slider } from '../Common/Slider'; -import { steveBallmerPhotoUrl } from './styles'; -import { useTheme } from '@uifabricshared/theming-react-native'; -import { AlignmentPicker } from '../Common/AlignmentPicker'; -import { commonTestStyles as commonStyles } from '../Common/styles'; - -export const CustomizeUsage: React.FunctionComponent<{}> = () => { - const [showImage, setShowImage] = React.useState(true); - const [coinColor, setCoinColor] = React.useState(); - const [textColor, setTextColor] = React.useState(); - const [physicalSize, setPhysicalSize] = React.useState(80); - const [iconSize, setIconSize] = React.useState(24); - const [initialsSize, setInitialsSize] = React.useState(14); - const [horizontalAlignment, setHorizontalAlignment] = React.useState(); - const [verticalAlignment, setVerticalAlignment] = React.useState(); - - const theme = useTheme(); - const textBoxBorderStyle = { - borderColor: theme.colors.inputBorder - }; - - const tokens: Partial = {}; - if (coinColor) { - tokens.backgroundColor = coinColor; - } - if (textColor) { - tokens.color = textColor; - } - if (horizontalAlignment) { - tokens.horizontalIconAlignment = horizontalAlignment; - } - if (verticalAlignment) { - tokens.verticalIconAlignment = verticalAlignment; - } - if (iconSize) { - tokens.iconSize = iconSize; - } - if (initialsSize) { - tokens.initialsSize = initialsSize; - } - if (physicalSize) { - tokens.coinSize = physicalSize; - } - - const CustomizedPersonaCoin = PersonaCoin.customize({ tokens }); - - return ( - - {/* settings */} - - - Show image - - - - { - setCoinColor(e.nativeEvent.text); - }} - /> - - { - setTextColor(e.nativeEvent.text); - }} - /> - - - - - Coin size - - - Icon size - - - Font size - - - - {/* component under test */} - - - ); -}; +import * as React from 'react'; +import { PersonaCoin, IconAlignment, IPersonaCoinTokens } from '@fluentui/react-native'; +import { Switch, View, Text, TextInput } from 'react-native'; +import { Slider } from '../Common/Slider'; +import { steveBallmerPhotoUrl } from './styles'; +import { useTheme } from '@uifabricshared/theming-react-native'; +import { AlignmentPicker } from '../Common/AlignmentPicker'; +import { commonTestStyles as commonStyles } from '../Common/styles'; + +export const CustomizeUsage: React.FunctionComponent<{}> = () => { + const [showImage, setShowImage] = React.useState(true); + const [coinColor, setCoinColor] = React.useState(); + const [textColor, setTextColor] = React.useState(); + const [physicalSize, setPhysicalSize] = React.useState(80); + const [iconSize, setIconSize] = React.useState(24); + const [initialsSize, setInitialsSize] = React.useState(14); + const [horizontalAlignment, setHorizontalAlignment] = React.useState(); + const [verticalAlignment, setVerticalAlignment] = React.useState(); + + const theme = useTheme(); + const textBoxBorderStyle = { + borderColor: theme.colors.inputBorder + }; + + const tokens: Partial = {}; + if (coinColor) { + tokens.backgroundColor = coinColor; + } + if (textColor) { + tokens.color = textColor; + } + if (horizontalAlignment) { + tokens.horizontalIconAlignment = horizontalAlignment; + } + if (verticalAlignment) { + tokens.verticalIconAlignment = verticalAlignment; + } + if (iconSize) { + tokens.iconSize = iconSize; + } + if (initialsSize) { + tokens.initialsSize = initialsSize; + } + if (physicalSize) { + tokens.coinSize = physicalSize; + } + + const CustomizedPersonaCoin = PersonaCoin.customize({ tokens }); + + return ( + + {/* settings */} + + + Show image + + + + { + setCoinColor(e.nativeEvent.text); + }} + /> + + { + setTextColor(e.nativeEvent.text); + }} + /> + + + + + Coin size + + + Icon size + + + Font size + + + + {/* component under test */} + + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/PersonaCoinTest.tsx b/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/PersonaCoinTest.tsx index 97473f002..b916b6982 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/PersonaCoinTest.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/PersonaCoinTest.tsx @@ -1,20 +1,20 @@ -import * as React from 'react'; -import { View, Text } from 'react-native'; -import { Separator } from '@fluentui/react-native'; -import { StandardUsage } from './StandardUsage'; -import { CustomizeUsage } from './CustomizeUsage'; -import { commonTestStyles as commonStyles } from '../Common/styles'; - -export const PersonaCoinTest: React.FunctionComponent<{}> = () => { - return ( - - Standard Usage - - - - Customize Usage - - - - ); -}; +import * as React from 'react'; +import { View, Text } from 'react-native'; +import { Separator } from '@fluentui/react-native'; +import { StandardUsage } from './StandardUsage'; +import { CustomizeUsage } from './CustomizeUsage'; +import { commonTestStyles as commonStyles } from '../Common/styles'; + +export const PersonaCoinTest: React.FunctionComponent<{}> = () => { + return ( + + Standard Usage + + + + Customize Usage + + + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/StandardUsage.tsx b/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/StandardUsage.tsx index f4d659146..89fabf1a6 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/StandardUsage.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/StandardUsage.tsx @@ -1,96 +1,96 @@ -import * as React from 'react'; -import { PersonaSize, PersonaCoinColor, PersonaCoin, PersonaPresence } from '@fluentui/react-native'; -import { Switch, View, Text, Picker } from 'react-native'; -import { satyaPhotoUrl, undefinedText } from './styles'; -import { commonTestStyles as commonStyles } from '../Common/styles'; - -type WithUndefined = T | typeof undefinedText; - -const allSizes: WithUndefined[] = [ - undefinedText, - 'size8', - 'size24', - 'size32', - 'size40', - 'size48', - 'size56', - 'size72', - 'size100', - 'size120' -]; - -const allColors: WithUndefined[] = [ - undefinedText, - 'lightBlue', - 'blue', - 'darkBlue', - 'teal', - 'green', - 'darkGreen', - 'lightPink', - 'pink', - 'magenta', - 'purple', - 'orange', - 'darkRed', - 'violet', - 'lightRed', - 'gold', - 'burgundy', - 'warmGray', - 'coolGray', - 'cyan', - 'rust' -]; -const allPresences: WithUndefined[] = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away']; - -export const StandardUsage: React.FunctionComponent<{}> = () => { - const [showImage, setShowImage] = React.useState(true); - const [imageSize, setImageSize] = React.useState>('size72'); - const [coinColor, setCoinColor] = React.useState>('gold'); - const [presence, setPresence] = React.useState>('online'); - - const onSizeChange = React.useCallback(value => setImageSize(value), []); - const onColorChange = React.useCallback(value => setCoinColor(value), []); - const onPresenceChange = React.useCallback(value => setPresence(value), []); - - return ( - - {/* settings */} - - - Show image - - - - - {allSizes.map((size, index) => ( - - ))} - - - - {allColors.map((color, index) => ( - - ))} - - - - {allPresences.map((presence, index) => ( - - ))} - - - - {/* component under test */} - - - ); -}; +import * as React from 'react'; +import { PersonaSize, PersonaCoinColor, PersonaCoin, PersonaPresence } from '@fluentui/react-native'; +import { Switch, View, Text, Picker } from 'react-native'; +import { satyaPhotoUrl, undefinedText } from './styles'; +import { commonTestStyles as commonStyles } from '../Common/styles'; + +type WithUndefined = T | typeof undefinedText; + +const allSizes: WithUndefined[] = [ + undefinedText, + 'size8', + 'size24', + 'size32', + 'size40', + 'size48', + 'size56', + 'size72', + 'size100', + 'size120' +]; + +const allColors: WithUndefined[] = [ + undefinedText, + 'lightBlue', + 'blue', + 'darkBlue', + 'teal', + 'green', + 'darkGreen', + 'lightPink', + 'pink', + 'magenta', + 'purple', + 'orange', + 'darkRed', + 'violet', + 'lightRed', + 'gold', + 'burgundy', + 'warmGray', + 'coolGray', + 'cyan', + 'rust' +]; +const allPresences: WithUndefined[] = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away']; + +export const StandardUsage: React.FunctionComponent<{}> = () => { + const [showImage, setShowImage] = React.useState(true); + const [imageSize, setImageSize] = React.useState>('size72'); + const [coinColor, setCoinColor] = React.useState>('gold'); + const [presence, setPresence] = React.useState>('online'); + + const onSizeChange = React.useCallback(value => setImageSize(value), []); + const onColorChange = React.useCallback(value => setCoinColor(value), []); + const onPresenceChange = React.useCallback(value => setPresence(value), []); + + return ( + + {/* settings */} + + + Show image + + + + + {allSizes.map((size, index) => ( + + ))} + + + + {allColors.map((color, index) => ( + + ))} + + + + {allPresences.map((presence, index) => ( + + ))} + + + + {/* component under test */} + + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/styles.ts b/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/styles.ts index a7c37426e..85ecaf94f 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/styles.ts +++ b/apps/fluent-tester/src/RNTester/TestComponents/PersonaCoin/styles.ts @@ -1,14 +1,14 @@ -import { StyleSheet } from 'react-native'; - -export const styles = StyleSheet.create({ - oneCoin: { - margin: 8 - } -}); - -export const satyaPhotoUrl = - 'https://www.microsoft.com/en-us/CMSImages/satya.jpg?version=0881eb71-4942-b627-d602-84c832b8a0b6&CollectionId=1b46ce2d-c90d-421e-94f1-cfb6bc6ef6ec'; - -export const steveBallmerPhotoUrl = 'http://www.rmndigital.com/wp-content/uploads/2012/11/stevems.jpg'; - -export const undefinedText = '(undefined)'; +import { StyleSheet } from 'react-native'; + +export const styles = StyleSheet.create({ + oneCoin: { + margin: 8 + } +}); + +export const satyaPhotoUrl = + 'https://www.microsoft.com/en-us/CMSImages/satya.jpg?version=0881eb71-4942-b627-d602-84c832b8a0b6&CollectionId=1b46ce2d-c90d-421e-94f1-cfb6bc6ef6ec'; + +export const steveBallmerPhotoUrl = 'http://www.rmndigital.com/wp-content/uploads/2012/11/stevems.jpg'; + +export const undefinedText = '(undefined)'; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Text/CustomizeUsage.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Text/CustomizeUsage.tsx index 0b76aff58..6bb329427 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Text/CustomizeUsage.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Text/CustomizeUsage.tsx @@ -1,48 +1,48 @@ -import * as React from 'react'; -import { View } from 'react-native'; -import { Stack } from '@fluentui-react-native/stack'; -import { Text } from '@fluentui-react-native/text'; -import { stackStyle } from '../Common/styles'; -import { styles } from './styles'; - -export const CustomizeUsage: React.FunctionComponent<{}> = () => { - const RedCaptionBold = Text.customize({ tokens: { variant: 'captionStandard', fontWeight: 'semiBold', color: '#ff0000' } }); - const OrangeSecondaryBold = Text.customize({ tokens: { variant: 'secondaryStandard', fontWeight: 'semiBold', color: '#ff9900' } }); - const YellowBodyBold = Text.customize({ tokens: { variant: 'bodyStandard', fontWeight: 'semiBold', color: '#f3ce00' } }); - const GreenSubheaderBold = Text.customize({ tokens: { variant: 'subheaderStandard', fontWeight: 'semiBold', color: '#02c440' } }); - const BlueHeaderBold = Text.customize({ tokens: { variant: 'headerStandard', fontWeight: 'semiBold', color: '#0229c4' } }); - const IndigoHeroBold = Text.customize({ tokens: { variant: 'heroStandard', fontWeight: 'semiBold', color: '#4b0082' } }); - const PurpleHeroLargeBold = Text.customize({ tokens: { variant: 'heroLargeStandard', fontWeight: 'semiBold', color: '#8402c4' } }); - - const ArialBlack = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Arial Black' } }); - const BrushScriptMT = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'Brush Script MT' } }); - const CourierNew = Text.customize({ tokens: { variant: 'headerStandard', fontFamily: 'Courier New' } }); - const Georgia = Text.customize({ tokens: { variant: 'subheaderStandard', fontFamily: 'Georgia' } }); - const SegoeScript = Text.customize({ tokens: { variant: 'bodyStandard', fontFamily: 'Segoe Script' } }); - const TimesNewRoman = Text.customize({ tokens: { variant: 'secondaryStandard', fontFamily: 'Times New Roman' } }); - const Wingdings = Text.customize({ tokens: { variant: 'captionStandard', fontFamily: 'Wingdings' } }); - - return ( - - - RedCaptionBold - OrangeSecondaryBold - YellowBodyBold - GreenSubheaderBold - BlueHeaderBold - IndigoHeroBold - PurpleHeroLargeBold - - - - Arial Black - Brush Script MT - Courier New - Georgia - Segoe Script - TimesNewRoman - Wingdings - - - ); -}; +import * as React from 'react'; +import { View } from 'react-native'; +import { Stack } from '@fluentui-react-native/stack'; +import { Text } from '@fluentui-react-native/text'; +import { stackStyle } from '../Common/styles'; +import { styles } from './styles'; + +export const CustomizeUsage: React.FunctionComponent<{}> = () => { + const RedCaptionBold = Text.customize({ tokens: { variant: 'captionStandard', fontWeight: 'semiBold', color: '#ff0000' } }); + const OrangeSecondaryBold = Text.customize({ tokens: { variant: 'secondaryStandard', fontWeight: 'semiBold', color: '#ff9900' } }); + const YellowBodyBold = Text.customize({ tokens: { variant: 'bodyStandard', fontWeight: 'semiBold', color: '#f3ce00' } }); + const GreenSubheaderBold = Text.customize({ tokens: { variant: 'subheaderStandard', fontWeight: 'semiBold', color: '#02c440' } }); + const BlueHeaderBold = Text.customize({ tokens: { variant: 'headerStandard', fontWeight: 'semiBold', color: '#0229c4' } }); + const IndigoHeroBold = Text.customize({ tokens: { variant: 'heroStandard', fontWeight: 'semiBold', color: '#4b0082' } }); + const PurpleHeroLargeBold = Text.customize({ tokens: { variant: 'heroLargeStandard', fontWeight: 'semiBold', color: '#8402c4' } }); + + const ArialBlack = Text.customize({ tokens: { variant: 'heroLargeStandard', fontFamily: 'Arial Black' } }); + const BrushScriptMT = Text.customize({ tokens: { variant: 'heroStandard', fontFamily: 'Brush Script MT' } }); + const CourierNew = Text.customize({ tokens: { variant: 'headerStandard', fontFamily: 'Courier New' } }); + const Georgia = Text.customize({ tokens: { variant: 'subheaderStandard', fontFamily: 'Georgia' } }); + const SegoeScript = Text.customize({ tokens: { variant: 'bodyStandard', fontFamily: 'Segoe Script' } }); + const TimesNewRoman = Text.customize({ tokens: { variant: 'secondaryStandard', fontFamily: 'Times New Roman' } }); + const Wingdings = Text.customize({ tokens: { variant: 'captionStandard', fontFamily: 'Wingdings' } }); + + return ( + + + RedCaptionBold + OrangeSecondaryBold + YellowBodyBold + GreenSubheaderBold + BlueHeaderBold + IndigoHeroBold + PurpleHeroLargeBold + + + + Arial Black + Brush Script MT + Courier New + Georgia + Segoe Script + TimesNewRoman + Wingdings + + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Text/StandardUsage.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Text/StandardUsage.tsx index a4a9cd798..7e51a4156 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Text/StandardUsage.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Text/StandardUsage.tsx @@ -1,24 +1,24 @@ -import * as React from 'react'; -import { View } from 'react-native'; -import { Text } from '@fluentui-react-native/text'; -import { styles } from './styles'; - -export const StandardUsage: React.FunctionComponent<{}> = () => { - return ( - - CaptionStandard - SecondaryStandard - SecondarySemibold - BodyStandard - BodySemibold - SubheaderStandard - SubheaderSemibold - HeaderStandard - HeaderSemibold - HeroStandard - HeroSemibold - HeroLargeStandard - HeroLargeSemibold - - ); -}; +import * as React from 'react'; +import { View } from 'react-native'; +import { Text } from '@fluentui-react-native/text'; +import { styles } from './styles'; + +export const StandardUsage: React.FunctionComponent<{}> = () => { + return ( + + CaptionStandard + SecondaryStandard + SecondarySemibold + BodyStandard + BodySemibold + SubheaderStandard + SubheaderSemibold + HeaderStandard + HeaderSemibold + HeroStandard + HeroSemibold + HeroLargeStandard + HeroLargeSemibold + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Text/TextTest.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Text/TextTest.tsx index 28352c7e0..48c806e47 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Text/TextTest.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Text/TextTest.tsx @@ -1,21 +1,21 @@ -import * as React from 'react'; -import { View } from 'react-native'; -import { Separator } from '@fluentui-react-native/separator'; -import { StandardUsage } from './StandardUsage'; -import { CustomizeUsage } from './CustomizeUsage'; -import { styles } from './styles'; -import { Text } from '@fluentui-react-native/text'; - -export const TextTest: React.FunctionComponent<{}> = () => { - return ( - - Standard Usage - - - - Customize Usage - - - - ); -}; +import * as React from 'react'; +import { View } from 'react-native'; +import { Separator } from '@fluentui-react-native/separator'; +import { StandardUsage } from './StandardUsage'; +import { CustomizeUsage } from './CustomizeUsage'; +import { styles } from './styles'; +import { Text } from '@fluentui-react-native/text'; + +export const TextTest: React.FunctionComponent<{}> = () => { + return ( + + Standard Usage + + + + Customize Usage + + + + ); +}; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Text/index.ts b/apps/fluent-tester/src/RNTester/TestComponents/Text/index.ts index d761e5963..2c25ab0f4 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Text/index.ts +++ b/apps/fluent-tester/src/RNTester/TestComponents/Text/index.ts @@ -1 +1 @@ -export * from './TextTest'; +export * from './TextTest'; diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Text/styles.ts b/apps/fluent-tester/src/RNTester/TestComponents/Text/styles.ts index 8dd95be97..50edf9a3b 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Text/styles.ts +++ b/apps/fluent-tester/src/RNTester/TestComponents/Text/styles.ts @@ -1,16 +1,16 @@ -import { StyleSheet } from 'react-native'; - -export const styles = StyleSheet.create({ - root: { - marginTop: 16, - marginRight: 32, - flexDirection: 'column', - alignItems: 'flex-start' - }, - section: { - fontSize: 15, - fontWeight: 'bold', - color: '#0B6A0B', - marginTop: 12 - } -}); +import { StyleSheet } from 'react-native'; + +export const styles = StyleSheet.create({ + root: { + marginTop: 16, + marginRight: 32, + flexDirection: 'column', + alignItems: 'flex-start' + }, + section: { + fontSize: 15, + fontWeight: 'bold', + color: '#0B6A0B', + marginTop: 12 + } +}); diff --git a/apps/fluent-tester/src/RNTester/TestComponents/Theme/ThemeTest.tsx b/apps/fluent-tester/src/RNTester/TestComponents/Theme/ThemeTest.tsx index 0faf56dae..deae71a50 100644 --- a/apps/fluent-tester/src/RNTester/TestComponents/Theme/ThemeTest.tsx +++ b/apps/fluent-tester/src/RNTester/TestComponents/Theme/ThemeTest.tsx @@ -1,205 +1,207 @@ -import * as React from 'react'; -import { FlatList, View, ViewStyle, TextStyle, StyleSheet } from 'react-native'; -import { getHostSettingsWin32, ThemeProvider, useTheme, IThemeDefinition, ThemingModuleHelper } from '@uifabricshared/theming-react-native'; -import { themedStyleSheet } from '@uifabricshared/themed-stylesheet'; -import { commonTestStyles } from '../Common/styles'; -import { Button, PrimaryButton, Separator, StealthButton, Text, RadioGroup, RadioButton } from '@fluentui/react-native'; -import { ITheme, IPartialTheme } from '@uifabricshared/theming-ramp'; -import { customRegistry } from './CustomThemes'; - -let brand = 'Office'; - -const brandColors = { - Word: ['#E3ECFA', '#A5B9D1', '#7DA3C6', '#4A78B0', '#3C65A4', '#2B579A', '#124078', '#002050'], - Excel: ['#E9F5EE', '#9FCDB3', '#6EB38A', '#4E9668', '#3F8159', '#217346', '#0E5C2F', '#004B1C'], - Powerpoint: ['#FCF0ED', '#FDC9B5', '#ED9583', '#E86E58', '#C75033', '#B7472A', '#A92B1A', '#740912'], - Outlook: ['#CCE3F5', '#B3D6F2', '#69AFE5', '#2488D8', '#0078D7', '#106EBE', '#1664A7', '#135995'], -}; - -// This IProcessTheme takes the parent theme and shims in the brand colors selected in the RadioGroup -const fakeBrandTheme: IThemeDefinition = (theme: ITheme): IPartialTheme => { - if (brand === 'Office') { - return {}; - } - - const brandValues = theme.colors.brand.values; - const brandedTheme = { colors: {}, host: { palette: {} } }; - Object.keys(theme.colors).forEach((value: string) => { - if (typeof theme.colors[value] === 'string') { - const index = brandValues.indexOf(theme.colors[value].toString()); - if (index !== -1) brandedTheme.colors[value] = brandColors[brand][index]; - } - }); - - const hostThemeSettings = getHostSettingsWin32(theme); - if (hostThemeSettings === undefined) return brandedTheme; - - Object.keys(hostThemeSettings.palette).forEach((value: string) => { - const index = brandValues.indexOf(hostThemeSettings.palette[value].toString()); - if (index !== -1) brandedTheme.host.palette[value] = brandColors[brand][index]; - }); - return brandedTheme; -}; - -// this applies the shim to the default theme -customRegistry.setTheme(fakeBrandTheme, 'Default'); -// this registers platform white colors -customRegistry.setTheme(ThemingModuleHelper.getPlatformThemeDefinition('WhiteColors'), 'RealWhiteColors'); -// this applies the shim to the white colors theme -customRegistry.setTheme(fakeBrandTheme, 'WhiteColors', 'RealWhiteColors'); - -const getThemedStyles = themedStyleSheet((theme: ITheme) => { - const hostSettings = getHostSettingsWin32(theme); - return { - swatch: { - width: 80, - height: 20, - marginRight: 5, - borderWidth: 2, - borderColor: theme.colors.bodyText, - }, - extraLargeStandardEmphasis: { - color: hostSettings ? hostSettings.palette.TextEmphasis : theme.colors.bodyText, - fontSize: theme.typography.sizes.header, - fontWeight: theme.typography.weights.regular, - fontFamily: theme.typography.families.primary, - } as TextStyle, - largeStandard: { - color: theme.colors.bodyText, - fontSize: theme.typography.sizes.body, - fontWeight: theme.typography.weights.regular, - fontFamily: theme.typography.families.primary, - marginBottom: 5, - } as TextStyle, - stackStyle: { - borderWidth: 2, - borderColor: theme.colors.focusBorder, - padding: 12, - margin: 8, - backgroundColor: theme.colors.background, - }, - }; -}); - -const styles = StyleSheet.create({ - swatchItem: { - flexDirection: 'row', - alignItems: 'center', - marginVertical: 5, - }, - pickerContainer: { - flexDirection: 'row', - justifyContent: 'space-evenly', - }, -}); - -const Panel: React.FunctionComponent = () => { - const [disabled, setDisabled] = React.useState(false); - const onClick = React.useCallback(() => setDisabled(!disabled), [disabled, setDisabled]); - const themedStyles = getThemedStyles(useTheme()); - return ( - - -