[menu-bar][electron] Add @fluentui components

CHANGELOG.md

@@ -7,7 +7,7 @@
 ### 🎉 New features
 
 - Add support for launching Expo updates. ([#134](https://github.com/expo/orbit/pull/134), [#137](https://github.com/expo/orbit/pull/137), [#138](https://github.com/expo/orbit/pull/138), [#144](https://github.com/expo/orbit/pull/144), [#148](https://github.com/expo/orbit/pull/148) by [@gabrieldonadel](https://github.com/gabrieldonadel))
-- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157), [#158](https://github.com/expo/orbit/pull/158), [#160](https://github.com/expo/orbit/pull/160), [#161](https://github.com/expo/orbit/pull/161), [#165](https://github.com/expo/orbit/pull/165), [#170](https://github.com/expo/orbit/pull/170), [#171](https://github.com/expo/orbit/pull/171), [#172](https://github.com/expo/orbit/pull/172) by [@gabrieldonadel](https://github.com/gabrieldonadel))
+- Add experimental support for Windows and Linux. ([#152](https://github.com/expo/orbit/pull/152), [#157](https://github.com/expo/orbit/pull/157), [#158](https://github.com/expo/orbit/pull/158), [#160](https://github.com/expo/orbit/pull/160), [#161](https://github.com/expo/orbit/pull/161), [#165](https://github.com/expo/orbit/pull/165), [#170](https://github.com/expo/orbit/pull/170), [#171](https://github.com/expo/orbit/pull/171), [#172](https://github.com/expo/orbit/pull/172), [#173](https://github.com/expo/orbit/pull/173) by [@gabrieldonadel](https://github.com/gabrieldonadel))
 
 ### 🐛 Bug fixes
 

apps/menu-bar/modules/progress-indicator/src/ProgressIndicatorView.web.tsx

@@ -1,10 +1,21 @@
+import { ProgressBar } from '@fluentui/react-components';
 import * as React from 'react';
 
 import { ProgressIndicatorViewProps } from './ProgressIndicator.types';
 
 export default function ProgressIndicatorView({
-  progress,
+  progress = 0,
   indeterminate,
 }: ProgressIndicatorViewProps) {
-  return <progress value={!indeterminate ? progress : undefined} max="100" />;
+  return (
+    <ProgressBar
+      thickness="large"
+      value={!indeterminate ? progress : undefined}
+      max={100}
+      style={{
+        width: 'auto',
+        height: 6,
+      }}
+    />
+  );
 }

apps/menu-bar/package.json

@@ -21,6 +21,8 @@
     "@expo/metro-config": "~0.17.1",
     "@expo/metro-runtime": "^2.2.16",
     "@expo/styleguide-native": "^1.0.1",
+    "@fluentui/react-components": "^9.46.4",
+    "@fluentui/react-icons": "^2.0.227",
     "@react-native-clipboard/clipboard": "^1.13.1",
     "apollo3-cache-persist": "^0.14.1",
     "common-types": "1.0.0",

apps/menu-bar/src/App.tsx

@@ -6,6 +6,7 @@ import AutoResizerRootView from './components/AutoResizerRootView';
 import { SAFE_AREA_FACTOR } from './hooks/useSafeDisplayDimensions';
 import Popover from './popover';
 import { DevicesProvider } from './providers/DevicesProvider';
+import { FluentProvider } from './providers/FluentProvider';
 import { ThemeProvider } from './providers/ThemeProvider';
 
 type Props = {
@@ -23,9 +24,11 @@ function App(props: Props) {
       enabled={!props.isDevWindow}
       maxRelativeHeight={SAFE_AREA_FACTOR}>
       <ThemeProvider themePreference="no-preference">
-        <DevicesProvider>
-          <Popover isDevWindow={props.isDevWindow} />
-        </DevicesProvider>
+        <FluentProvider>
+          <DevicesProvider>
+            <Popover isDevWindow={props.isDevWindow} />
+          </DevicesProvider>
+        </FluentProvider>
       </ThemeProvider>
     </AutoResizerRootView>
   );

apps/menu-bar/src/components/Checkbox/NativeCheckbox.web.tsx

@@ -1,12 +1,15 @@
+import { Checkbox as FluentCheckbox } from '@fluentui/react-components';
 import React from 'react';
 
 import { CheckboxChangeEvent, NativeCheckboxProps } from './types';
 
 const Checkbox = React.forwardRef(({ value, onChange }: NativeCheckboxProps, ref) => {
   return (
-    <input
+    <FluentCheckbox
       type="checkbox"
       checked={Boolean(value)}
+      size="medium"
+      style={{ marginLeft: -6 }}
       onChange={(event) =>
         onChange?.({
           nativeEvent: { value: event.target.checked },

apps/menu-bar/src/components/Switch/index.tsx

@@ -0,0 +1 @@
+export { Switch } from 'react-native';

apps/menu-bar/src/components/Switch/index.web.tsx

@@ -0,0 +1,16 @@
+import { Switch as FluentSwitch } from '@fluentui/react-components';
+import { SwitchProps } from 'react-native';
+
+export function Switch({ onValueChange, value, disabled }: SwitchProps) {
+  return (
+    <FluentSwitch
+      disabled={disabled}
+      checked={value}
+      onChange={(ev) => {
+        if (onValueChange) {
+          onValueChange(Boolean(ev.target.checked));
+        }
+      }}
+    />
+  );
+}

apps/menu-bar/src/components/SystemIconView/index.web.tsx

@@ -1,3 +1,12 @@
-import { View } from 'react-native';
+import { Bug16Filled, Question16Filled } from '@fluentui/react-icons';
 
-export default View;
+function SystemIconView({ systemIconName }: { systemIconName: string }) {
+  switch (systemIconName) {
+    case 'ladybug':
+      return <Bug16Filled />;
+    default:
+      return <Question16Filled />;
+  }
+}
+
+export default SystemIconView;

apps/menu-bar/src/modules/WindowManager/index.web.ts

@@ -3,6 +3,7 @@ import { requireElectronModule } from 'react-native-electron-modules/build/requi
 
 import { withWindowProvider } from './WindowProvider';
 import { WindowsConfig, WindowsManagerType } from './types';
+import { withFluentProvider } from '../../providers/FluentProvider';
 import { withThemeProvider } from '../../utils/useExpoTheme';
 
 export { WindowStyleMask } from './types';
@@ -12,7 +13,7 @@ export const WindowManager = requireElectronModule<WindowsManagerType>('WindowMa
 export function createWindowsNavigator<T extends WindowsConfig>(config: T) {
   Object.entries(config).forEach(([key, value]) => {
     AppRegistry.registerComponent(key, () =>
-      withWindowProvider(withThemeProvider(value.component), key)
+      withWindowProvider(withFluentProvider(withThemeProvider(value.component)), key)
     );
   });
 

apps/menu-bar/src/providers/FluentProvider/index.tsx

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+
+export const withFluentProvider = <P extends object>(WrappedComponent: React.ComponentType<P>) => {
+  return (props: P) => {
+    return <WrappedComponent {...props} />;
+  };
+};
+
+export const FluentProvider = ({ children }: { children: ReactElement }) => {
+  return children;
+};

apps/menu-bar/src/providers/FluentProvider/index.web.tsx

@@ -0,0 +1,47 @@
+import {
+  FluentProvider as ReactFluentProvider,
+  webLightTheme,
+  webDarkTheme,
+  Theme,
+} from '@fluentui/react-components';
+import { CSSProperties, ComponentType, ReactElement } from 'react';
+import { useColorScheme } from 'react-native';
+
+const lightTheme: Theme = {
+  ...webLightTheme,
+  colorNeutralBackground1: 'var(--orbit-window-background)',
+};
+
+const darkTheme: Theme = {
+  ...webDarkTheme,
+  colorNeutralBackground1: 'var(--orbit-window-background)',
+};
+
+export const FluentProvider = ({
+  children,
+  style,
+}: {
+  children: ReactElement;
+  style?: CSSProperties;
+}) => {
+  const scheme = useColorScheme();
+  const theme = scheme === 'dark' ? darkTheme : lightTheme;
+
+  return (
+    <ReactFluentProvider theme={theme} style={style}>
+      {children}
+    </ReactFluentProvider>
+  );
+};
+
+export const withFluentProvider = <P extends object>(WrappedComponent: ComponentType<P>) => {
+  const WithFluentProvider = (props: P) => {
+    return (
+      <FluentProvider style={{ display: 'flex', width: '100%' }}>
+        <WrappedComponent {...props} />
+      </FluentProvider>
+    );
+  };
+
+  return WithFluentProvider;
+};