@fluentui-react-native/tester 0.152.0 → 0.153.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.152.0",
+  "version": "0.153.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -74,6 +74,7 @@
     "@fluentui-react-native/theme-types": ">=0.32.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.5.2",
     "@fluentui-react-native/theming-utils": ">=0.24.3 <1.0.0",
+    "@fluentui-react-native/vibrancy-view": ">=0.0.2 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.27.5 <1.0.0",
     "@fluentui/react-native": ">=0.37.19 <1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",

package/src/TestComponents/VibrancyView/VibrancyViewTest.tsx

@@ -0,0 +1,231 @@
+import * as React from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+import type { ViewProps } from 'react-native';
+
+import { ButtonV1 as Button, Text } from '@fluentui/react-native';
+import { Stack } from '@fluentui-react-native/stack';
+import type { Material, BlendingMode, State } from '@fluentui-react-native/vibrancy-view';
+import { VibrancyView } from '@fluentui-react-native/vibrancy-view';
+
+import { VIBRANCYVIEW_TESTPAGE } from '../../../../E2E/src/VibrancyView/consts';
+import { MenuPicker } from '../Common/MenuPicker';
+import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const styles = StyleSheet.create({
+  row: {
+    flex: 1,
+    flexDirection: 'row',
+  },
+  box: {
+    width: 100,
+    height: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  bigBox: {
+    width: 200,
+    height: 200,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  biggerBox: {
+    backgroundColor: 'yellow',
+    width: 300,
+    height: 300,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  Rectangle1: {
+    backgroundColor: 'yellow',
+    width: 300,
+    height: 300,
+  },
+  Rectangle2: {
+    position: 'absolute',
+    top: 50,
+    width: 400,
+    height: 200,
+  },
+  centeredBox: {
+    backgroundColor: 'green',
+    width: 100,
+    height: 100,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  borderProps: {
+    backgroundColor: 'blue',
+    borderColor: 'red',
+    borderWidth: 1,
+    borderRadius: 8,
+  },
+  rootWithSpacing: { ...commonStyles.root, gap: 8 },
+});
+
+const VibrancyViewDefault: React.FunctionComponent = () => {
+  return (
+    <Stack style={stackStyle}>
+      <View style={styles.rootWithSpacing}>
+        <Text>Vibrancy View with no props set</Text>
+        <VibrancyView style={styles.box} />
+      </View>
+    </Stack>
+  );
+};
+
+const VibrancyViewWithViewProps: React.FunctionComponent = () => {
+  const descriptionString = '<View> and <VibrancyView> with the backgroundColor, borderColor, borderWidth, borderRadius set';
+  const viewProps: ViewProps = React.useMemo(() => {
+    return {
+      focusable: true,
+      style: [styles.box, styles.borderProps],
+    };
+  }, []);
+  return (
+    <Stack style={stackStyle}>
+      <View style={styles.rootWithSpacing}>
+        <Text>{descriptionString}</Text>
+        <View style={styles.row}>
+          <View {...viewProps} />
+          <VibrancyView {...viewProps} />
+        </View>
+      </View>
+    </Stack>
+  );
+};
+
+const materialSelections: Material[] = [
+  'titlebar',
+  'selection',
+  'menu',
+  'popover',
+  'sidebar',
+  'headerview',
+  'sheet',
+  'windowbackground',
+  'hudWindow',
+  'fullScreenUI',
+  'toolTip',
+  'contentBackground',
+  'underWindowBackground',
+  'underPageBackground',
+];
+const materialsCollection = materialSelections.map((material) => {
+  return {
+    label: material,
+    value: material,
+  };
+});
+
+const blendingModeSelections: BlendingMode[] = ['withinWindow', 'behindWindow'];
+const blendingModeCollection = blendingModeSelections.map((material) => {
+  return {
+    label: material,
+    value: material,
+  };
+});
+
+const stateSelections: State[] = ['followsWindowActiveState', 'active', 'inactive'];
+const stateCollection = stateSelections.map((material) => {
+  return {
+    label: material,
+    value: material,
+  };
+});
+
+const VibrancyViewWithVibrancyViewProps: React.FunctionComponent = () => {
+  const [material, setMaterial] = React.useState<Material>(undefined);
+  const [blendingMode, setBlendingMode] = React.useState<BlendingMode>(undefined);
+  const [state, setState] = React.useState<State>(undefined);
+
+  const onMaterialChange = React.useCallback((material: Material) => {
+    setMaterial(material);
+  }, []);
+
+  const onBlendingModeChange = React.useCallback((blendingMode: BlendingMode) => {
+    setBlendingMode(blendingMode);
+  }, []);
+
+  const onStateChange = React.useCallback((state: State) => {
+    setState(state);
+  }, []);
+
+  return (
+    <Stack style={stackStyle}>
+      <View style={styles.Rectangle1}>
+        <VibrancyView material={material} blendingMode={blendingMode} state={state} style={styles.Rectangle2}>
+          <MenuPicker prompt="Material" selected={material || 'undefined'} onChange={onMaterialChange} collection={materialsCollection} />
+          <MenuPicker
+            prompt="Blending Mode"
+            selected={blendingMode || 'undefined'}
+            onChange={onBlendingModeChange}
+            collection={blendingModeCollection}
+          />
+          <MenuPicker prompt="State" selected={state || 'undefined'} onChange={onStateChange} collection={stateCollection} />
+        </VibrancyView>
+      </View>
+    </Stack>
+  );
+};
+
+const HitTestButton = (props: { title: string }) => {
+  const onClick = React.useCallback(
+    (_e) => {
+      Alert.alert(props.title);
+    },
+    [props],
+  );
+  return <Button onClick={onClick}>{props.title}</Button>;
+};
+
+const VibrancyViewHitTest: React.FunctionComponent = () => {
+  return (
+    <View style={commonStyles.root}>
+      <HitTestButton title={'Button 1'} />
+      <VibrancyView style={styles.biggerBox}>
+        <HitTestButton title={'Button 2'} />
+        <View style={styles.centeredBox}>
+          <HitTestButton title={'Button 3'} />
+        </View>
+        <HitTestButton title={'Button 4'} />
+      </VibrancyView>
+      <HitTestButton title={'Button 5'} />
+    </View>
+  );
+};
+
+const VibrancyViewSections: TestSection[] = [
+  {
+    name: 'VibrancyView Default',
+    testID: VIBRANCYVIEW_TESTPAGE,
+    component: VibrancyViewDefault,
+  },
+  {
+    name: 'VibrancyView with View props',
+    component: VibrancyViewWithViewProps,
+  },
+  {
+    name: 'VibrancyView with VibrancyView props',
+    component: VibrancyViewWithVibrancyViewProps,
+  },
+  {
+    name: 'VibrancyView Hit Test',
+    component: VibrancyViewHitTest,
+  },
+];
+
+export const VibrancyViewTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'N/A',
+    uwpStatus: 'N/A',
+    iosStatus: 'Backlog',
+    macosStatus: 'Beta',
+    androidStatus: 'N/A',
+  };
+
+  const description = 'VibrancyView is a native module that exposes NSVisualEffectView to React Native on macOS';
+
+  return <Test name="VibrancyView Test" description={description} sections={VibrancyViewSections} status={status}></Test>;
+};

package/src/TestComponents/VibrancyView/index.ts

@@ -0,0 +1 @@
+export * from './VibrancyViewTest';

package/src/testPages.ts

@@ -44,6 +44,7 @@ import { TabsV1Test } from './TestComponents/TabsV1';
 import { TextLegacyTest } from './TestComponents/TextLegacy';
 import { TextV1Test } from './TestComponents/TextV1';
 import { ThemeTest } from './TestComponents/Theme';
+import { VibrancyViewTest } from './TestComponents/VibrancyView';
 import * as Constants from '../../E2E/src/index.consts';
 
 export const tests: TestDescription[] = [
@@ -330,4 +331,10 @@ export const tests: TestDescription[] = [
     testPageButton: Constants.HOMEPAGE_THEME_BUTTON,
     platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
+  {
+    name: 'Vibrancy View',
+    component: VibrancyViewTest,
+    testPageButton: Constants.HOMEPAGE_VIBRANCYVIEW_BUTTON,
+    platforms: ['macos'],
+  },
 ];