@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Theme/ThemeTest.android.tsx

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import type { ColorValue, ViewStyle } from 'react-native';
+import { Text as TextRN, View } from 'react-native';
+import { StyleSheet } from 'react-native';
+
+import { Text } from '@fluentui/react-native';
+import { THEME_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { useFluentTheme } from '@fluentui-react-native/framework';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+import { commonTestStyles } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const getThemedStyles = themedStyleSheet((theme: Theme) => {
+  return {
+    swatch: {
+      color: theme.colors.neutralForeground1,
+    },
+    rootView: {
+      backgroundColor: theme.colors.brandBackground,
+    },
+  };
+});
+
+const styles = StyleSheet.create({
+  swatchItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 5,
+  },
+  panel: {
+    ...commonTestStyles.view,
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
+  pickerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  stackStyle: {
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
+});
+
+const Panel: React.FunctionComponent = () => {
+  const theme = useFluentTheme();
+  const themedStyles = getThemedStyles(theme);
+
+  return (
+    <View>
+      <Text style={{ color: theme.colors.buttonBackgroundChecked }}>buttonBackgroundChecked styled text</Text>
+
+      <Text style={{ color: theme.colors.neutralForeground1 }}>neutralForeground1 styled text</Text>
+
+      <Text style={{ color: theme.colors.hostColorPink }}>hostColorPink styled text</Text>
+
+      <Text style={{ color: theme.colors.hostColorButtonBackground }}>hostColorButtonBackground styled text</Text>
+
+      <Text style={{ color: theme.colors.hostColorBrandText }}>hostColorBrandText styled text</Text>
+
+      <TextRN style={{ color: theme.colors.yellowBrandColor }}>yellowBrandColor styled text</TextRN>
+
+      <TextRN style={themedStyles.swatch}>Styled RN Text</TextRN>
+    </View>
+  );
+};
+
+const getSwatchColorStyle = (name: string, color: ColorValue): ViewStyle => {
+  styles[name] = styles[name] || { backgroundColor: color };
+  return styles[name];
+};
+
+type SemanticColorProps = { color: ColorValue; name: string };
+const SemanticColor: React.FunctionComponent<SemanticColorProps> = (p: SemanticColorProps) => {
+  const themedStyles = getThemedStyles(useFluentTheme());
+  return (
+    <View style={styles.swatchItem}>
+      <View style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]} />
+      <Text>{p.name}</Text>
+    </View>
+  );
+};
+
+const SwatchList: React.FunctionComponent = () => {
+  const theme = useFluentTheme();
+  const palette = theme.colors;
+
+  const aggregator = React.useCallback(
+    (key: string) => {
+      return { key: key + ' (' + (palette[key] as string) + ')', color: palette[key] };
+    },
+    [palette],
+  );
+
+  const flattenArray = React.useCallback(() => {
+    return Object.keys(palette).sort().map(aggregator);
+  }, [palette, aggregator]);
+
+  const paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
+  const renderSwatch = React.useCallback((item) => {
+    const { color, key } = item;
+    return <SemanticColor key={key} color={color} name={key} />;
+  }, []);
+  return (
+    <View style={commonTestStyles.view}>
+      <Text>getColorsAndroid(theme: ITheme).palette</Text>
+      <View style={styles.stackStyle}>{paletteAsArray.map((item) => renderSwatch(item))}</View>
+    </View>
+  );
+};
+const themeSections: TestSection[] = [
+  {
+    name: 'Component Examples',
+    testID: THEME_TESTPAGE,
+    component: Panel,
+  },
+  {
+    name: 'Theme.colors',
+    component: () => <SwatchList />,
+  },
+];
+
+export const ThemeTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Beta',
+    uwpStatus: 'Experimental',
+    iosStatus: 'Experimental',
+    macosStatus: 'Experimental',
+    androidStatus: 'Beta',
+  };
+
+  const description =
+    'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
+
+  return <Test name="Theme Test" description={description} sections={themeSections} status={status} />;
+};

package/src/TestComponents/Theme/ThemeTest.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import type { ViewStyle, ColorValue } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+
+import { Button, PrimaryButton, Text, StealthButton } from '@fluentui/react-native';
+import { THEME_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+import { commonTestStyles } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const getThemedStyles = themedStyleSheet((theme: Theme) => {
+  return {
+    swatch: {
+      width: 80,
+      height: 20,
+      marginRight: 5,
+      borderWidth: 2,
+      borderColor: theme.colors.bodyText,
+    },
+  };
+});
+
+const styles = StyleSheet.create({
+  swatchItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 5,
+  },
+  panel: {
+    ...commonTestStyles.view,
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
+  pickerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  stackStyle: {
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
+});
+
+const Panel: React.FunctionComponent = () => {
+  const [disabled, setDisabled] = React.useState(false);
+  const onClick = React.useCallback(() => setDisabled(!disabled), [disabled, setDisabled]);
+  return (
+    <View style={styles.panel}>
+      <PrimaryButton onClick={onClick} content="Primary Button" disabled={disabled} />
+      <Button onClick={onClick} content="Default Button" disabled={disabled} />
+      <StealthButton onClick={onClick} content="Stealth Button" disabled={disabled} />
+      <Text>This is a text element</Text>
+      <Button onClick={onClick} content="This button has longer text" disabled={disabled} />
+    </View>
+  );
+};
+
+const getSwatchColorStyle = (name: string, color: ColorValue): ViewStyle => {
+  styles[name] = styles[name] || { backgroundColor: color };
+  return styles[name];
+};
+
+type SemanticColorProps = { color: ColorValue; name: string };
+const SemanticColor: React.FunctionComponent<SemanticColorProps> = (p: SemanticColorProps) => {
+  const themedStyles = getThemedStyles(useTheme());
+  return (
+    <View style={styles.swatchItem}>
+      <View style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]} />
+      <Text>{p.name}</Text>
+    </View>
+  );
+};
+
+const SwatchList: React.FunctionComponent = () => {
+  const theme = useTheme();
+  const palette = theme.colors;
+
+  const aggregator = React.useCallback(
+    (key: string) => {
+      return { key: key + ' (' + (palette[key] as string) + ')', color: palette[key] };
+    },
+    [palette],
+  );
+
+  const flattenArray = React.useCallback(() => {
+    return Object.keys(palette).sort().map(aggregator);
+  }, [palette, aggregator]);
+
+  const paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
+  const renderSwatch = React.useCallback((item) => {
+    const { color, key } = item;
+    return <SemanticColor key={key} color={color} name={key} />;
+  }, []);
+  return (
+    <View style={commonTestStyles.view}>
+      <Text>getHostSettingsWin32(theme: ITheme).palette</Text>
+      <View style={styles.stackStyle}>{paletteAsArray.map((item) => renderSwatch(item))}</View>
+    </View>
+  );
+};
+
+const themeSections: TestSection[] = [
+  {
+    name: 'Component Examples',
+    testID: THEME_TESTPAGE,
+    component: Panel,
+  },
+  {
+    name: 'Theme.colors',
+    component: () => <SwatchList />,
+  },
+];
+
+export const ThemeTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Beta',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  const description =
+    'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
+
+  return <Test name="Theme Test" description={description} sections={themeSections} status={status} />;
+};

package/src/TestComponents/Theme/index.ts

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

package/src/TestComponents/Tooltip/TooltipDefault.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 } from '@fluentui-react-native/button';
+import { Tooltip } from '@fluentui-react-native/tooltip';
+
+export const TooltipDefault: React.FunctionComponent = () => {
+  const defaultContent = 'Tooltip shows relative to mouse cursor.';
+  return (
+    <View>
+      <Tooltip content={defaultContent}>
+        <ButtonV1 accessibilityDescription={defaultContent}>Default Tooltip</ButtonV1>
+      </Tooltip>
+    </View>
+  );
+};

package/src/TestComponents/Tooltip/TooltipPosition.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { ButtonV1 } from '@fluentui-react-native/button';
+import { Tooltip } from '@fluentui-react-native/tooltip';
+
+export const TooltipPosition: React.FunctionComponent = () => {
+  const topCenterRef = React.useRef<View>(null);
+
+  return (
+    <View>
+      {/* In Progress - Implementation for custom positioning and anchoring is not completed in the native module. */}
+      <Tooltip content="Test" positioning="topCenter" target={topCenterRef}>
+        <ButtonV1 componentRef={topCenterRef}>Target + TopCenter</ButtonV1>
+      </Tooltip>
+      <Tooltip content="Test" positioning="topCenter" target={'test'}>
+        <ButtonV1 nativeID={'test'}>Target + TopCenter</ButtonV1>
+      </Tooltip>
+      {/* Adding more tests as follow-up*/}
+    </View>
+  );
+};

package/src/TestComponents/Tooltip/TooltipTest.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { TOOLTIP_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import { TooltipDefault } from './TooltipDefault';
+// import { TooltipPosition } from './TooltipPosition';
+import { Test } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+
+const tooltipSections: TestSection[] = [
+  {
+    name: 'Default',
+    testID: TOOLTIP_TESTPAGE,
+    component: TooltipDefault,
+  },
+  // In Progress - Implementation for custom positioning and anchoring is not completed in the native module.
+  // {
+  //   name: 'Target + Positioning',
+  //   component: TooltipPosition,
+  // },
+];
+
+export const TooltipTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Backlog',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'A Tooltip component displays additional information about another component. Tooltip is not expected to handle interactive content.';
+
+  return <Test name="Tooltip Test" description={description} sections={tooltipSections} status={status} />;
+};

package/src/TestComponents/Tooltip/index.ts

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

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 { VIBRANCYVIEW_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+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 { 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/TestComponents/index.ts

@@ -0,0 +1,8 @@
+import type * as React from 'react';
+
+export type TestDescription = {
+  name: string;
+  component: React.FunctionComponent;
+  testPageButton: string;
+  platforms: string[];
+};

package/src/index.ts

@@ -0,0 +1 @@
+export { FluentTesterApp } from './FluentTesterApp';