@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { Switch, View, Text, TextInput, StyleSheet } from 'react-native';
+
+import { PersonaCoin } from '@fluentui/react-native';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import Slider from '@react-native-community/slider';
+import type { SliderProps } from '@react-native-community/slider';
+
+import type { undefinedText } from './styles';
+import { steveBallmerPhotoUrl } from './styles';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+const NativeSlider = Slider as unknown as React.ComponentType<SliderProps>;
+
+type WithUndefined<T> = T | typeof undefinedText;
+
+const styles = StyleSheet.create({ slider: { ...commonStyles.vmargin, flex: 1 } });
+
+const StyledSlider = (props) => {
+  const { title, min, max, initial, onChange, current, step } = props;
+  const theme = useTheme();
+  return (
+    <View style={{ flexDirection: 'row' }}>
+      <Text style={{ flex: 0.5, color: theme.colors.inputText }}>{title}</Text>
+      <NativeSlider step={step || 1} minimumValue={min} maximumValue={max} value={initial} style={styles.slider} onValueChange={onChange} />
+      <Text style={{ flex: 0.2, color: theme.colors.inputText }}>{current}</Text>
+    </View>
+  );
+};
+
+const StyledTextInput = (props) => {
+  const theme = useTheme();
+  const textInputStyles = [
+    commonStyles.textBox,
+    { flex: 1, marginHorizontal: 5, borderColor: theme.colors.disabledBodyText, color: theme.colors.inputText },
+  ];
+  return (
+    <TextInput
+      accessibilityLabel={props.placeholder}
+      style={textInputStyles}
+      placeholderTextColor={theme.colors.disabledBodyText}
+      blurOnSubmit={true}
+      {...props}
+    />
+  );
+};
+
+const StyledSwitch = (props) => {
+  const { title, value, onChange } = props;
+  const theme = useTheme();
+  return (
+    <View style={commonStyles.switch}>
+      <Text style={{ color: theme.colors.inputText, flex: 1 }}>{title}</Text>
+      <Switch style={{ flex: 1 }} value={value} onValueChange={onChange} />
+    </View>
+  );
+};
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [showRings, setShowRings] = React.useState(true);
+  const [showPresence, setShowPresence] = React.useState(true);
+  const [showColoredBackground, setShowColoredBackground] = React.useState(false);
+  const [transparent, setTransparent] = React.useState(false);
+  const [coinColor, setCoinColor] = React.useState<WithUndefined<string>>('green');
+  const [textColor, setTextColor] = React.useState<WithUndefined<string>>('white');
+  const [coinSize, setCoinsize] = React.useState<number>(88);
+  const [ringThickness, setRingThickness] = React.useState<number>(4);
+  const [innerGap, setInnerGap] = React.useState<number>(4);
+  const [iconSize, setIconSize] = React.useState<number>(20);
+  const [iconStrokeWidth, setIconStrokeWidth] = React.useState<number>(4);
+  const [ringColor, setRingColor] = React.useState<string>('green');
+  const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
+
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      ring: { ringColor: 'red' },
+      coinSize: coinSize,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [coinColor, textColor, coinSize, iconSize, iconStrokeWidth]);
+
+  return (
+    <View style={{ flexDirection: 'column', padding: 10, backgroundColor: showColoredBackground ? 'gray' : 'transparent' }}>
+      {/* component under test */}
+      <View style={{ flexDirection: 'row', padding: 20, alignItems: 'center' }}>
+        <View style={{ width: '35%', alignItems: 'center' }}>
+          <CustomizedPersonaCoin
+            initials="SB"
+            imageDescription="Photo of Satya Nadella"
+            imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+            presence={showPresence && iconSize ? 'away' : undefined}
+            ring={
+              showRings && ringThickness
+                ? {
+                    ringColor,
+                    ringBackgroundColor,
+                    ringThickness,
+                    innerGap,
+                    transparent,
+                  }
+                : undefined
+            }
+          />
+        </View>
+        {/** Switch settings */}
+        <View style={{ width: '50%', marginLeft: 30 }}>
+          <StyledSwitch title="Change Background" value={showColoredBackground} onChange={setShowColoredBackground} />
+          <StyledSwitch title="Show Image" value={showImage} onChange={setShowImage} />
+          <StyledSwitch title="Show Presence" value={showPresence} onChange={setShowPresence} />
+          <StyledSwitch title="Show Rings" value={showRings} onChange={setShowRings} />
+          <StyledSwitch title="Show transparent rings" value={transparent} onChange={setTransparent} />
+        </View>
+      </View>
+
+      {/** settings section */}
+      <View>
+        <StyledSlider min={8} max={120} initial={88} onChange={setCoinsize} current={coinSize} step={8} title="coinSize" />
+        <StyledSlider min={0} max={8} initial={4} onChange={setRingThickness} current={ringThickness} title="ringThickness" />
+        <StyledSlider min={0} max={8} initial={4} onChange={setInnerGap} current={innerGap} title="innerGap" />
+        <StyledSlider min={0} max={28} initial={20} onChange={setIconSize} current={iconSize} step={4} title="iconSize" />
+        <StyledSlider min={2} max={8} initial={4} onChange={setIconStrokeWidth} current={iconStrokeWidth} title="iconStrokeWidth" />
+
+        <View style={{ flexDirection: 'row' }}>
+          <StyledTextInput
+            placeholder="Ring glow color"
+            onSubmitEditing={(e) => {
+              setRingColor(e.nativeEvent.text);
+            }}
+          />
+
+          <StyledTextInput
+            placeholder="Ring background color"
+            onSubmitEditing={(e) => {
+              setRingBackgroundColor(e.nativeEvent.text);
+            }}
+          />
+        </View>
+
+        <View style={{ flexDirection: 'row' }}>
+          <StyledTextInput
+            placeholder="Background color"
+            onSubmitEditing={(e) => {
+              setCoinColor(e.nativeEvent.text);
+            }}
+          />
+
+          <StyledTextInput
+            placeholder="Initials text color"
+            onSubmitEditing={(e) => {
+              setTextColor(e.nativeEvent.text);
+            }}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/PersonaCoin/CustomizeUsage.tsx

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import { Switch, View, Text, TextInput } from 'react-native';
+
+import type { IconAlignment } from '@fluentui/react-native';
+import { PersonaCoin } from '@fluentui/react-native';
+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 { steveBallmerPhotoUrl } from './styles';
+import { AlignmentPicker } from '../Common/AlignmentPicker';
+import { Slider } from '../Common/Slider';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
+export const CustomizeUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [coinColor, setCoinColor] = React.useState<string>();
+  const [textColor, setTextColor] = React.useState<string>();
+  const [physicalSize, setPhysicalSize] = React.useState<number>(80);
+  const [iconSize, setIconSize] = React.useState<number>(24);
+  const [iconStrokeWidth, setIconStrokeWidth] = React.useState<number>(2);
+  const [iconStrokeColor, setIconStrokeColor] = React.useState<string>(undefined);
+  const [initialsSize, setInitialsSize] = React.useState<number>(14);
+  const [horizontalAlignment, setHorizontalAlignment] = React.useState<IconAlignment>();
+  const [verticalAlignment, setVerticalAlignment] = React.useState<IconAlignment>();
+
+  const [ringColor, setRingColor] = React.useState<string>('red');
+  const [ringBackgroundColor, setRingBackgroundColor] = React.useState<string>(undefined);
+  const [showRing, setShowRing] = React.useState<boolean>(true);
+  const [transparent, setTransparent] = React.useState<boolean>(false);
+
+  const theme = useTheme();
+  const textBoxBorderStyle = getThemedStyles(theme);
+
+  const CustomizedPersonaCoin = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      horizontalIconAlignment: horizontalAlignment,
+      verticalIconAlignment: verticalAlignment,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+      iconStrokeColor: iconStrokeColor,
+      initialsSize: initialsSize,
+      coinSize: physicalSize,
+    };
+    return PersonaCoin.customize({ tokens });
+  }, [
+    coinColor,
+    textColor,
+    horizontalAlignment,
+    verticalAlignment,
+    iconSize,
+    iconStrokeWidth,
+    iconStrokeColor,
+    initialsSize,
+    physicalSize,
+  ]);
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Show rings</Text>
+          <Switch value={showRing} onValueChange={setShowRing} />
+        </View>
+
+        <View style={commonStyles.switch}>
+          <Text>Transparent Ring</Text>
+          <Switch value={transparent} onValueChange={setTransparent} />
+        </View>
+
+        <TextInput
+          accessibilityLabel="Background color"
+          style={textBoxBorderStyle.textbox}
+          placeholder="Background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setCoinColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Initials text color"
+          style={textBoxBorderStyle.textbox}
+          placeholder="Initials text color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setTextColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Icon stroke color"
+          style={textBoxBorderStyle.textbox}
+          placeholder="Icon stroke color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setIconStrokeColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Ring color"
+          style={textBoxBorderStyle.textbox}
+          placeholder="Ring color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingColor(e.nativeEvent.text);
+          }}
+        />
+
+        <TextInput
+          accessibilityLabel="Ring background color"
+          style={textBoxBorderStyle.textbox}
+          placeholder="Ring background color"
+          blurOnSubmit={true}
+          onSubmitEditing={(e) => {
+            setRingBackgroundColor(e.nativeEvent.text);
+          }}
+        />
+
+        <AlignmentPicker style={commonStyles.header} label="Horizontal icon alignment" onSelectionChange={setHorizontalAlignment} />
+        <AlignmentPicker style={commonStyles.header} label="Vertical icon alignment" onSelectionChange={setVerticalAlignment} />
+
+        <Text>Coin size</Text>
+        <Slider minimum={8} maximum={200} initialValue={80} style={commonStyles.vmargin} onChange={setPhysicalSize} />
+
+        <Text>Icon size</Text>
+        <Slider minimum={8} maximum={100} initialValue={24} style={commonStyles.vmargin} onChange={setIconSize} />
+
+        <Text>Icon stroke width</Text>
+        <Slider minimum={0} maximum={8} initialValue={2} style={commonStyles.vmargin} onChange={setIconStrokeWidth} />
+
+        <Text>Font size</Text>
+        <Slider minimum={5} maximum={50} initialValue={14} style={commonStyles.vmargin} onChange={setInitialsSize} />
+      </View>
+
+      {/* component under test */}
+      <CustomizedPersonaCoin
+        initials="SB"
+        imageDescription="Former CEO of Microsoft"
+        presence="blocked"
+        imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
+        ring={
+          showRing
+            ? {
+                ringColor,
+                ringBackgroundColor,
+                ringThickness: 4,
+                innerGap: 4,
+                transparent,
+              }
+            : undefined
+        }
+      />
+    </View>
+  );
+};

package/src/TestComponents/PersonaCoin/PersonaCoinTest.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { PERSONACOIN_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+
+import { CustomizeUsage } from './CustomizeUsage';
+import { StandardUsage } from './StandardUsage';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const personaCoinSections: TestSection[] = [
+  {
+    name: 'Standard Usage',
+    testID: PERSONACOIN_TESTPAGE,
+    component: StandardUsage,
+  },
+  {
+    name: 'Customize Usage',
+    component: CustomizeUsage,
+  },
+];
+
+export const PersonaCoinTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+
+  const description = "PersonaCoins are used for rendering an individual's avatar. PersonaCoin renders the circular image component.";
+
+  return <Test name="PersonaCoin Test" description={description} sections={personaCoinSections} status={status} />;
+};

package/src/TestComponents/PersonaCoin/StandardUsage.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import type { ColorValue } from 'react-native';
+import { Switch, View, Text } from 'react-native';
+
+import type { PersonaSize, PersonaCoinFluentColor, PersonaPresence } from '@fluentui/react-native';
+import { PersonaCoin } from '@fluentui/react-native';
+import { useTheme } from '@fluentui-react-native/theme-types';
+
+import { satyaPhotoUrl, undefinedText } from './styles';
+import { StyledPicker } from '../Common/StyledPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+type WithUndefined<T> = T | typeof undefinedText;
+
+const allSizes: WithUndefined<PersonaSize>[] = [
+  undefinedText,
+  'size8',
+  'size24',
+  'size32',
+  'size40',
+  'size48',
+  'size56',
+  'size72',
+  'size100',
+  'size120',
+];
+
+const allColors: WithUndefined<PersonaCoinFluentColor>[] = [
+  undefinedText,
+  'cornflower',
+  'blue',
+  'royalBlue',
+  'teal',
+  'forest',
+  'darkGreen',
+  'berry',
+  'hotPink',
+  'grape',
+  'purple',
+  'pumpkin',
+  'red',
+  'burgundy',
+  'orchid',
+  'brass',
+  'darkRed',
+  'beige',
+  'platinum',
+  'steel',
+  'brown',
+];
+
+const allPresences: WithUndefined<PersonaPresence>[] = [undefinedText, 'none', 'online', 'offline', 'busy', 'dnd', 'blocked', 'away'];
+
+export const StandardUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [imageSize, setImageSize] = React.useState<WithUndefined<PersonaSize>>('size72');
+  const [coinColor, setCoinColor] = React.useState<WithUndefined<PersonaCoinFluentColor>>('brass');
+  const [presence, setPresence] = React.useState<WithUndefined<PersonaPresence>>('online');
+
+  const onSizeChange = React.useCallback((value) => setImageSize(value), []);
+  const onColorChange = React.useCallback((value) => setCoinColor(value), []);
+  const onPresenceChange = React.useCallback((value) => setPresence(value), []);
+
+  const theme = useTheme();
+  const textStyles = { color: theme.colors.inputText as ColorValue };
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settingsPicker}>
+        <View style={commonStyles.switch}>
+          <Text style={textStyles}>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </View>
+        <StyledPicker prompt="Size" selected={imageSize} onChange={onSizeChange} collection={allSizes} />
+        <StyledPicker prompt="Coin color" selected={coinColor} onChange={onColorChange} collection={allColors} />
+        <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
+      </View>
+
+      {/* component under test */}
+      <View style={commonStyles.pickerControlled}>
+        <PersonaCoin
+          size={imageSize === undefinedText ? undefined : imageSize}
+          initials="SN"
+          imageDescription="Photo of Satya Nadella"
+          presence={presence === undefinedText ? undefined : presence}
+          imageUrl={showImage ? satyaPhotoUrl : undefined}
+          coinColorFluent={coinColor === undefinedText ? undefined : coinColor}
+        />
+      </View>
+    </View>
+  );
+};

package/src/TestComponents/PersonaCoin/index.ts

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

package/src/TestComponents/PersonaCoin/styles.ts

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({ oneCoin: { margin: 8 } });
+
+export const satyaPhotoUrl = 'https://upload.wikimedia.org/wikipedia/commons/5/53/Satya_bookcover-print.jpg';
+
+export const steveBallmerPhotoUrl = 'https://www.rmndigital.com/wp-content/uploads/2012/11/stevems.jpg';
+
+export const undefinedText = '(undefined)';

package/src/TestComponents/Pressable/PressableTest.tsx

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import type { GestureResponderEvent, ViewProps, ViewStyle } from 'react-native';
+import { Alert, StyleSheet, View, Text } from 'react-native';
+
+import { Pressable } from '@fluentui/react-native';
+import { PRESSABLE_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { useFocusState, useHoverState, usePressState } from '@fluentui-react-native/interactive-hooks';
+import type { IPressableState } from '@fluentui-react-native/interactive-hooks';
+import { Stack } from '@fluentui-react-native/stack';
+
+import { Square } from '../Common/Square';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const styles = StyleSheet.create({
+  dottedBorder: {
+    borderWidth: 1,
+    padding: 8,
+    margin: 4,
+    borderStyle: 'dotted',
+    borderColor: 'red',
+  },
+  solidBorder: {
+    borderWidth: 1,
+    padding: 8,
+    margin: 4,
+    borderStyle: 'solid',
+    borderColor: 'black',
+  },
+  notfocused: {
+    borderWidth: 1,
+    padding: 8,
+    margin: 4,
+    borderColor: '#ababab',
+    borderStyle: 'solid',
+  },
+  focused: {
+    borderWidth: 1,
+    padding: 8,
+    margin: 4,
+    borderStyle: 'solid',
+    borderColor: 'black',
+    backgroundColor: 'lightblue',
+  },
+  notPressed: {
+    borderWidth: 1,
+    padding: 8,
+    margin: 4,
+    width: 30,
+    height: 30,
+    borderColor: '#ababab',
+    borderStyle: 'solid',
+  },
+  pressed: {
+    borderWidth: 1,
+    padding: 8,
+    margin: 4,
+    width: 30,
+    height: 30,
+    borderStyle: 'dashed',
+    borderColor: 'black',
+    backgroundColor: 'lightgreen',
+  },
+});
+
+function renderStyle(state: IPressableState): ViewStyle {
+  return (state.pressed && { opacity: 0.5 }) || {};
+}
+
+/* Pressable that only has focusState */
+const FocusComponent: React.FunctionComponent<ViewProps> = () => {
+  const [focusProps, focusState] = useFocusState({});
+
+  return (
+    <Stack focusable={false}>
+      <View focusable={true} {...(focusProps as any)} style={focusState.focused ? styles.focused : styles.notfocused} />
+    </Stack>
+  );
+};
+
+/* Pressable that only has pressState */
+const PressComponent: React.FunctionComponent<ViewProps> = (props: ViewProps) => {
+  const [pressProps, pressState] = usePressState(props);
+
+  const onTouchEnd = React.useCallback(
+    (e: GestureResponderEvent) => {
+      pressProps.onTouchEnd && pressProps.onTouchEnd(e);
+      Alert.alert('Alert.', 'Object has been pressed.');
+    },
+    [pressProps],
+  );
+
+  const onInvoke = React.useCallback(() => {
+    Alert.alert('Alert.', 'Object has been pressed.');
+  }, []);
+
+  return (
+    <Stack focusable={false}>
+      <View
+        accessible
+        accessibilityLabel={'Press to alert'}
+        onAccessibilityTap={onInvoke}
+        accessibilityRole="button"
+        focusable={true}
+        {...pressProps}
+        onTouchEnd={onTouchEnd}
+        style={pressState.pressed ? styles.pressed : styles.notPressed}
+      />
+    </Stack>
+  );
+};
+
+const PressableMainTest: React.FunctionComponent = () => {
+  const [hoverProps, hoverState] = useHoverState({});
+
+  return (
+    <Stack horizontal gap={5}>
+      <Square color="blue" />
+      <Pressable renderStyle={renderStyle}>
+        <Square />
+      </Pressable>
+      <Square color="green" />
+      <Stack>
+        <View {...(hoverProps as any)} style={hoverState.hovered ? styles.dottedBorder : styles.solidBorder}>
+          <Text>{hoverState.hovered ? 'hovered' : 'not hovered'}</Text>
+        </View>
+      </Stack>
+      <Stack>
+        <Text>Click a component to initially focus and tab to keyboard focus to next component: </Text>
+        <FocusComponent />
+        <FocusComponent />
+        <FocusComponent />
+        <FocusComponent />
+      </Stack>
+      <Stack>
+        <Text>Press to alert: </Text>
+        <PressComponent />
+      </Stack>
+    </Stack>
+  );
+};
+
+const pressableSections: TestSection[] = [
+  {
+    name: 'Pressable Components',
+    testID: PRESSABLE_TESTPAGE,
+    component: PressableMainTest,
+  },
+];
+
+export const PressableTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+
+  const description = 'No description.';
+
+  return <Test name="Pressable Test" description={description} sections={pressableSections} status={status} />;
+};

package/src/TestComponents/Pressable/index.ts

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