Add fluent-ui-react-native controls and update various visual styles

README.md

@@ -107,3 +107,4 @@ The app's settings are handled by a `SettingsContext` object, which has dialog U
 - Storage via [react-native-async-storage](https://github.com/react-native-async-storage/async-storage)
 - Markdown rendering via [react-native-markdown-display-updated](https://github.com/willmac321/react-native-markdown-display)
 - Dialogs via [react-native-content-dialog](https://github.com/chrisglein/react-native-content-dialog)
+- Button, Checkbox, Link via [@fluentui/react-native](https://github.com/microsoft/fluentui-react-native)

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
+  presets: [['module:metro-react-native-babel-preset', {useTransformReactJSXExperimental:true}]],
+  plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]]
 };

package.json

@@ -12,15 +12,17 @@
     "postinstall": "patch-package"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.17.11",
+    "@fluentui/react-native": "^0.36.20",
+    "@react-native-async-storage/async-storage": "^1.22.3",
     "@react-native-clipboard/clipboard": "^1.12.1",
-    "@react-native-picker/picker": "^2.5.1",
+    "@react-native-picker/picker": "^2.6.1",
     "patch-package": "^6.5.1",
     "postinstall-postinstall": "^2.1.0",
     "react": "18.2.0",
     "react-native": "0.73.0-rc.1",
     "react-native-content-dialog": "^0.2.0",
     "react-native-markdown-display-updated": "^7.0.0",
+    "react-native-svg": "^15.1.0",
     "react-native-syntax-highlighter": "^2.1.0",
     "react-native-windows": "0.73.10"
   },
@@ -37,10 +39,11 @@
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
+    "metro-config": "^0.79.1",
+    "metro-react-native-babel-preset": "^0.77.0",
     "prettier": "2.8.8",
     "react-test-renderer": "18.2.0",
-    "typescript": "5.0.4",
-    "metro-config": "^0.79.1"
+    "typescript": "5.0.4"
   },
   "engines": {
     "node": ">=18"

patches/@react-native-async-storage+async-storage+1.19.3.patch → patches/@react-native-async-storage+async-storage+1.22.3.patch

@@ -1,5 +1,5 @@
 diff --git a/node_modules/@react-native-async-storage/async-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj b/node_modules/@react-native-async-storage/async-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj
-index fb2a141..82172b0 100644
+index 356e26d..9ad543b 100644
 --- a/node_modules/@react-native-async-storage/async-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj
 +++ b/node_modules/@react-native-async-storage/async-storage/windows/ReactNativeAsyncStorage/ReactNativeAsyncStorage.vcxproj
 @@ -1,10 +1,10 @@
@@ -20,7 +20,7 @@ index fb2a141..82172b0 100644
      <ApplicationType>Windows Store</ApplicationType>
      <ApplicationTypeRevision>10.0</ApplicationTypeRevision>
 -    <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0</WindowsTargetPlatformVersion>
--    <WindowsTargetPlatformMinVersion>10.0.16299.0</WindowsTargetPlatformMinVersion>
+-    <WindowsTargetPlatformMinVersion Condition=" '$(WindowsTargetPlatformMinVersion)' == '' ">10.0.17763.0</WindowsTargetPlatformMinVersion>
    </PropertyGroup>
 -  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
    <PropertyGroup Label="ReactNativeWindowsProps">
@@ -30,7 +30,7 @@ index fb2a141..82172b0 100644
 +  <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props')" />
 +  <PropertyGroup Label="Fallback Windows SDK Versions">
 +   <WindowsTargetPlatformVersion Condition=" '$(WindowsTargetPlatformVersion)' == '' ">10.0</WindowsTargetPlatformVersion>
-+   <WindowsTargetPlatformMinVersion Condition=" '$(WindowsTargetPlatformMinVersion)' == '' ">10.0.16299.0</WindowsTargetPlatformMinVersion>
++   <WindowsTargetPlatformMinVersion Condition=" '$(WindowsTargetPlatformMinVersion)' == '' ">10.0.17763.0</WindowsTargetPlatformMinVersion>
    </PropertyGroup>
 +  <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
    <ItemGroup Label="ProjectConfigurations">
@@ -54,12 +54,7 @@ index fb2a141..82172b0 100644
    <ItemGroup>
      <ClInclude Include="..\code\pch.h" />
      <ClInclude Include="..\code\ReactPackageProvider.h">
-@@ -136,18 +139,18 @@
-   </ItemGroup>
-   <ItemGroup>
-     <None Include="packages.config" />
--    <None Include="..\code\ReactNativeAsyncStorage.def" />
-+<None Include="..\code\ReactNativeAsyncStorage.def" />
+@@ -140,14 +143,14 @@
    </ItemGroup>
    <ItemGroup>
      <None Include="PropertySheet.props" />

patches/react-native-svg+15.1.0.patch

@@ -0,0 +1,18 @@
+diff --git a/node_modules/react-native-svg/windows/RNSVG/RNSVG.vcxproj b/node_modules/react-native-svg/windows/RNSVG/RNSVG.vcxproj
+index 0fdeca0..8ca53fd 100644
+--- a/node_modules/react-native-svg/windows/RNSVG/RNSVG.vcxproj
++++ b/node_modules/react-native-svg/windows/RNSVG/RNSVG.vcxproj
+@@ -26,12 +26,10 @@
+     <AppContainerApplication>true</AppContainerApplication>
+     <ApplicationType>Windows Store</ApplicationType>
+     <ApplicationTypeRevision>10.0</ApplicationTypeRevision>
+-    <WindowsTargetPlatformVersion>10.0</WindowsTargetPlatformVersion>
+-    <WindowsTargetPlatformMinVersion>10.0.22621.0</WindowsTargetPlatformMinVersion>
+   </PropertyGroup>
+   <Import Project="$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props" Condition="Exists('$(ReactNativeWindowsDir)\PropertySheets\External\Microsoft.ReactNative.WindowsSdk.Default.props')" />
+   <PropertyGroup Label="Fallback Windows SDK Versions">
+-    <WindowsTargetPlatformVersion Condition="'$(WindowsTargetPlatformVersion)'=='' Or $([MSBuild]::VersionLessThan('$(WindowsTargetPlatformVersion)', '10.0.18362.0'))">10.0.18362.0</WindowsTargetPlatformVersion>
++    <WindowsTargetPlatformVersion Condition="'$(WindowsTargetPlatformVersion)'==''">10.0.18362.0</WindowsTargetPlatformVersion>
+     <WindowsTargetPlatformMinVersion Condition=" '$(WindowsTargetPlatformMinVersion)' == '' ">10.0.16299.0</WindowsTargetPlatformMinVersion>
+   </PropertyGroup>
+   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />

src/About.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import {
-  Button,
   Text,
   View,
 } from 'react-native';
-import {Hyperlink} from './Controls';
+import {Link} from '@fluentui/react-native';
 import {
   ContentDialog,
 } from './Popups';
@@ -27,8 +26,8 @@ function AboutPopup({show, close}: AboutPopupProps): JSX.Element {
       <Text>Version: <Text style={{fontWeight: 'bold'}}>{VersionInfo.getConstants().appVersion}</Text></Text>
       <View style={{flexDirection: 'row', gap: 4}}>
         <Text>Source code:</Text>
-        <Hyperlink
-          text='GitHub'
+        <Link
+          content='GitHub'
           url='https://github.com/chrisglein/artificial-chat/'/>
       </View>
     </ContentDialog>

src/App.tsx

@@ -7,13 +7,15 @@ import { ChatSession } from './ChatSession';
 import {
   StylesContext,
   CreateStyles,
+  createWindowsTheme,
 } from './Styles';
 import {
   SettingsContext,
   SettingsPopup,
 } from './Settings';
 import { AboutPopup } from './About';
 import { PopupsContext } from './Popups';
+import { ThemeProvider } from '@fluentui-react-native/theme';
 
 function App(): JSX.Element {
   const [currentTheme, setCurrentTheme] = React.useState(Appearance.getColorScheme());
@@ -67,19 +69,21 @@ function App(): JSX.Element {
 
   return (
     <StylesContext.Provider value={styles}>
-      <SettingsContext.Provider value={settings}>
-        <PopupsContext.Provider value={popups}>
-          <View>
-            <ChatSession/>
-            <SettingsPopup
-              show={showSettingsPopup}
-              close={() => popups.setShowSettings(false)}/>
-            <AboutPopup
-              show={popups.showAbout}
-              close={() => popups.setShowAbout(false)}/>
-          </View>
-        </PopupsContext.Provider>
-      </SettingsContext.Provider>
+      <ThemeProvider theme={createWindowsTheme()}>
+        <SettingsContext.Provider value={settings}>
+          <PopupsContext.Provider value={popups}>
+            <View>
+              <ChatSession/>
+              <SettingsPopup
+                show={showSettingsPopup}
+                close={() => popups.setShowSettings(false)}/>
+              <AboutPopup
+                show={popups.showAbout}
+                close={() => popups.setShowAbout(false)}/>
+            </View>
+          </PopupsContext.Provider>
+        </SettingsContext.Provider>
+      </ThemeProvider>
     </StylesContext.Provider>
   );
 }