@fluentui-react-native/tester 0.170.50 → 0.170.52

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

@@ -1,162 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,93 +0,0 @@
-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

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

package/src/TestComponents/PersonaCoin/styles.ts

@@ -1,9 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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

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