@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Overflow/OverflowE2ETest.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Divider } from '@fluentui-react-native/divider';
+import {
+  FIRST_OVERFLOW_ITEM,
+  FIRST_OVERFLOW_ITEM_ID,
+  SECOND_OVERFLOW_ITEM,
+  SECOND_OVERFLOW_ITEM_ID,
+  THIRD_OVERFLOW_ITEM,
+  THIRD_OVERFLOW_ITEM_ID,
+  OVERFLOW_MENU,
+  READY_LABEL,
+  READY_VALUE_FALSE,
+  READY_VALUE_TRUE,
+  UPDATED_LABEL,
+  UPDATED_VALUE_FALSE,
+  UPDATED_VALUE_TRUE,
+  RADIO_175,
+  RADIO_275,
+  RADIO_375,
+} from '@fluentui-react-native/e2e-testing';
+import { Overflow, OverflowItem, useOverflowMenu } from '@fluentui-react-native/overflow';
+import { RadioGroupV1 as RadioGroup, Radio } from '@fluentui-react-native/radio-group';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+
+const styles = StyleSheet.create({
+  menu: {
+    width: 50,
+  },
+  item: {
+    width: 100,
+  },
+});
+
+function OverflowMenu() {
+  const { showMenu, visibleMenuItems, onMenuTriggerLayout } = useOverflowMenu();
+  const overflowCount = visibleMenuItems.length;
+
+  if (showMenu) {
+    return (
+      <Button testID={OVERFLOW_MENU} onLayout={onMenuTriggerLayout} style={styles.menu}>
+        {`${overflowCount} hidden`}
+      </Button>
+    );
+  } else {
+    return null;
+  }
+}
+
+const items = [FIRST_OVERFLOW_ITEM_ID, SECOND_OVERFLOW_ITEM_ID, THIRD_OVERFLOW_ITEM_ID];
+const itemsToTestIDs = {
+  [FIRST_OVERFLOW_ITEM_ID]: FIRST_OVERFLOW_ITEM,
+  [SECOND_OVERFLOW_ITEM_ID]: SECOND_OVERFLOW_ITEM,
+  [THIRD_OVERFLOW_ITEM_ID]: THIRD_OVERFLOW_ITEM,
+};
+
+export function E2EOverflowTest() {
+  const [overflowStyles, setOverflowStyles] = React.useState<StyleProp<ViewStyle>>({});
+  const [ready, setReady] = React.useState(false);
+  const [updated, setUpdated] = React.useState(false);
+
+  const handleRadioGroupChange = React.useCallback((key) => {
+    setUpdated(false);
+    const keyAsInt = parseInt(key);
+    setOverflowStyles({ width: keyAsInt });
+  }, []);
+
+  const handleReady = React.useCallback(() => setReady(true), []);
+  const handleOverflowUpdate = React.useCallback(() => setUpdated(true), []);
+
+  return (
+    <View>
+      <Text testID={READY_LABEL}>{ready ? READY_VALUE_TRUE : READY_VALUE_FALSE}</Text>
+      <Text testID={UPDATED_LABEL}>{updated ? UPDATED_VALUE_TRUE : UPDATED_VALUE_FALSE}</Text>
+      <Divider />
+      <RadioGroup defaultValue="375" label="Width Options" onChange={handleRadioGroupChange}>
+        <Radio testID={RADIO_175} label="175" value="175" />
+        <Radio testID={RADIO_275} label="275" value="275" />
+        <Radio testID={RADIO_375} label="375" value="375" />
+      </RadioGroup>
+      <Divider />
+      <Overflow onOverflowUpdate={handleOverflowUpdate} itemIDs={items} style={overflowStyles} onReady={handleReady}>
+        {items.map((id, i) => (
+          <OverflowItem testID={itemsToTestIDs[id]} priority={items.length - i} overflowID={id} key={id}>
+            <Button style={styles.item}>{`Item '${id}'`}</Button>
+          </OverflowItem>
+        ))}
+        <OverflowMenu />
+      </Overflow>
+    </View>
+  );
+}

package/src/TestComponents/Overflow/OverflowTest.tsx

@@ -0,0 +1,227 @@
+import * as React from 'react';
+import { View, StyleSheet } from 'react-native';
+import type { ViewStyle } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Divider } from '@fluentui-react-native/divider';
+import { OVERFLOW_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { Menu, MenuTrigger, MenuList, MenuPopover, MenuItem } from '@fluentui-react-native/menu';
+import { Overflow, OverflowItem, useOverflowMenu } from '@fluentui-react-native/overflow';
+import { TabList, Tab } from '@fluentui-react-native/tablist';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+
+import { E2EOverflowTest } from './OverflowE2ETest';
+import MoreHorizontalIcon from '../../../assets/MoreHorizontalFilled.svg';
+import { Test } from '../Test';
+
+const items = ['a', 'b', 'c', 'd', 'e'];
+const itemLabels = {
+  a: 'Item A',
+  b: 'Item B Item B Item B',
+  c: 'Item C Item C',
+  d: 'Item D',
+  e: 'Item E Item E Item E Item E',
+};
+
+const overflowTestPageStyles = StyleSheet.create({
+  containerStyle: {
+    paddingVertical: 4,
+  },
+  width100: {
+    width: 100,
+  },
+  width250: {
+    width: 250,
+  },
+  width400: {
+    width: 400,
+  },
+  menuTrigger: {
+    alignSelf: 'center',
+  },
+  dynamicAddRemoval: {
+    width: 400,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'black',
+  },
+});
+
+interface OverflowMenuProps {
+  onItemPress: (id: string) => void;
+}
+
+function OverflowMenu(props: OverflowMenuProps) {
+  const { showMenu, visibleMenuItems, menuTriggerRef, onMenuTriggerLayout } = useOverflowMenu();
+
+  if (showMenu) {
+    return (
+      <Menu>
+        <MenuTrigger>
+          <Button
+            accessibilityLabel="More options"
+            onLayout={onMenuTriggerLayout}
+            style={overflowTestPageStyles.menuTrigger}
+            appearance="subtle"
+            iconOnly
+            icon={{ svgSource: { src: MoreHorizontalIcon, viewBox: '0 0 20 20' } }}
+            componentRef={menuTriggerRef}
+          />
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            {visibleMenuItems.map((id) => (
+              <MenuItem onClick={() => props.onItemPress(id)} key={id}>
+                {itemLabels[id] ?? 'Item ' + id}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    );
+  } else {
+    return null;
+  }
+}
+
+function OverflowMainTest() {
+  return (
+    <View style={overflowTestPageStyles.containerStyle}>
+      <Overflow itemIDs={items}>
+        {items.map((item) => (
+          <OverflowItem key={item} overflowID={item}>
+            <Button onClick={() => console.log(item)}>{itemLabels[item]}</Button>
+          </OverflowItem>
+        ))}
+        <OverflowMenu onItemPress={console.log} />
+      </Overflow>
+    </View>
+  );
+}
+
+function OverflowTabTest() {
+  const [key, setKey] = React.useState('a');
+  return (
+    <View style={overflowTestPageStyles.containerStyle}>
+      <Overflow dontHideBeforeReady itemIDs={items}>
+        <TabList selectedKey={key} onTabSelect={setKey}>
+          {items.map((item) => (
+            <OverflowItem priority={key === item ? 2 : 1} key={item} overflowID={item}>
+              <Tab tabKey={item}>{itemLabels[item]}</Tab>
+            </OverflowItem>
+          ))}
+          <OverflowMenu onItemPress={setKey} />
+        </TabList>
+      </Overflow>
+    </View>
+  );
+}
+
+function OverflowWidthExample(props: { width: number; dontHideBeforeReady?: boolean }) {
+  const style = React.useMemo<ViewStyle>(() => ({ width: props.width }), [props]);
+  return (
+    <View style={overflowTestPageStyles.containerStyle}>
+      <Text variant="body1Strong">{`Width: ${props.width}`}</Text>
+      <Overflow dontHideBeforeReady={props.dontHideBeforeReady} style={style} itemIDs={items}>
+        {items.map((item) => (
+          <OverflowItem overflowID={item} key={item}>
+            <Button>Item {' ' + item}</Button>
+          </OverflowItem>
+        ))}
+        <OverflowMenu onItemPress={console.log} />
+      </Overflow>
+    </View>
+  );
+}
+
+function OverflowDifferentWidthTest() {
+  return (
+    <View>
+      <Text variant="heroStandard">Hidden Before Layout</Text>
+      <OverflowWidthExample width={100} />
+      <OverflowWidthExample width={250} />
+      <OverflowWidthExample width={400} />
+      <Divider />
+      <Text variant="heroStandard">Visible Before Layout</Text>
+      <OverflowWidthExample dontHideBeforeReady width={100} />
+      <OverflowWidthExample dontHideBeforeReady width={250} />
+      <OverflowWidthExample dontHideBeforeReady width={400} />
+    </View>
+  );
+}
+
+function OverflowDynamicAddRemovalTest() {
+  const [ids, setIDs] = React.useState(['1', '2', '3']);
+  const addItem = React.useCallback(
+    () =>
+      setIDs((prev) => {
+        const newItem = (parseInt(prev[prev.length - 1]) + 1).toString();
+        return [...prev, newItem];
+      }),
+    [],
+  );
+  const removeItem = React.useCallback((item: string) => setIDs((prev) => prev.filter((x) => x !== item)), []);
+  return (
+    <View style={overflowTestPageStyles.containerStyle}>
+      <Text>Add buttons using the button below. Remove by clicking on individual items in the Overflow container.</Text>
+      <Button onClick={addItem}>Add item</Button>
+      <Text>Overflow Items (raw): {ids.reduce((prev, curr) => prev + ', ' + curr)}</Text>
+      <Divider />
+      <Overflow padding={4} style={overflowTestPageStyles.dynamicAddRemoval} itemIDs={ids}>
+        {ids.map((id) => {
+          return (
+            <OverflowItem key={id} overflowID={id}>
+              <Button onClick={() => removeItem(id)}>{'Item ' + id}</Button>
+            </OverflowItem>
+          );
+        })}
+        <OverflowMenu onItemPress={removeItem} />
+      </Overflow>
+    </View>
+  );
+}
+
+export const OverflowTest: React.FunctionComponent = () => {
+  const description =
+    'The `Overflow` and `OverflowItem` components, based off the same Fluent web v9 components of the same name, are low level utilities that enable users to create overflow experiences with any component. These components will detect and hide overflowing elements on screen and manage the overflow state.';
+
+  return (
+    <Test
+      name="Overflow Test"
+      description={description}
+      sections={[
+        {
+          name: 'Overflow',
+          component: OverflowMainTest,
+          testID: OVERFLOW_TESTPAGE,
+        },
+        {
+          name: 'Overflow TabList',
+          component: OverflowTabTest,
+        },
+        {
+          name: 'Overflow Dynamic Add/Removal of Items',
+          component: OverflowDynamicAddRemovalTest,
+        },
+        {
+          name: 'Overflow Variable Width',
+          component: OverflowDifferentWidthTest,
+        },
+      ]}
+      e2eSections={[
+        {
+          name: 'Overflow E2E Section',
+          component: E2EOverflowTest,
+        },
+      ]}
+      spec="https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Overflow/SPEC.md"
+      status={{
+        win32Status: 'Experimental',
+        uwpStatus: 'Backlog',
+        iosStatus: 'Backlog',
+        macosStatus: 'Experimental',
+        androidStatus: 'Backlog',
+      }}
+    />
+  );
+};

package/src/TestComponents/Persona/CustomizeUsage.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { View, Text, Switch, TextInput } from 'react-native';
+
+import { Persona } 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 { michaelImageUrl } from './styles';
+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 [textSize, setTextSize] = React.useState<number>(23);
+  const [secondarySize, setSecondarySize] = React.useState<number>(20);
+  const [tertiarySize, setTertiarySize] = React.useState<number>(17);
+  const [optionalSize, setOptionalSize] = React.useState<number>(14);
+
+  const [horizontalGap, setHorizontalGap] = React.useState<number>();
+  const [verticalGap, setVerticalGap] = React.useState<number>();
+
+  const theme = useTheme();
+  const textBoxBorderStyle = getThemedStyles(theme);
+
+  const CustomizedPersona = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      textFont: { fontSize: textSize },
+      secondaryFont: { fontSize: secondarySize },
+      tertiaryFont: { fontSize: tertiarySize },
+      optionalFont: { fontSize: optionalSize },
+      horizontalGap: horizontalGap,
+      verticalGap: verticalGap,
+    };
+    return Persona.customize({ tokens });
+  }, [coinColor, textColor, textSize, secondarySize, tertiarySize, optionalSize, horizontalGap, verticalGap]);
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settings}>
+        <View style={commonStyles.switch}>
+          <Text>Show image</Text>
+          <Switch value={showImage} onValueChange={setShowImage} />
+        </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);
+          }}
+        />
+
+        <Text>Primary text size</Text>
+        <Slider maximum={50} minimum={5} initialValue={textSize} style={commonStyles.vmargin} onChange={setTextSize} />
+
+        <Text>Secondary text size</Text>
+        <Slider maximum={50} minimum={5} initialValue={secondarySize} style={commonStyles.vmargin} onChange={setSecondarySize} />
+
+        <Text>Tertiary text size</Text>
+        <Slider maximum={50} minimum={5} initialValue={tertiarySize} style={commonStyles.vmargin} onChange={setTertiarySize} />
+
+        <Text>Optional text size</Text>
+        <Slider maximum={50} minimum={5} initialValue={optionalSize} style={commonStyles.vmargin} onChange={setOptionalSize} />
+
+        <Text>Horizontal gap</Text>
+        <Slider maximum={100} initialValue={5} minimum={0} style={commonStyles.vmargin} onChange={setHorizontalGap} />
+
+        <Text>Vertical gap</Text>
+        <Slider maximum={20} initialValue={5} minimum={0} style={commonStyles.vmargin} onChange={setVerticalGap} />
+      </View>
+      {/* component under test */}
+      <CustomizedPersona
+        initials="MJ"
+        size="size72"
+        text="Michael Jackson"
+        secondaryText="Pop singer"
+        tertiaryText="King of pop"
+        optionalText="Indiana"
+        imageDescription="Legendary pop singer"
+        presence="offline"
+        imageUrl={showImage ? michaelImageUrl : undefined}
+      />
+    </View>
+  );
+};

package/src/TestComponents/Persona/PersonaTest.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { PERSONA_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 personaSections: TestSection[] = [
+  {
+    name: 'Standard Usage',
+    testID: PERSONA_TESTPAGE,
+    component: StandardUsage,
+  },
+  {
+    name: 'Customize Usage',
+    component: CustomizeUsage,
+  },
+];
+
+export const PersonaTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Deprecated',
+    uwpStatus: 'Deprecated',
+    iosStatus: 'Deprecated',
+    macosStatus: 'Deprecated',
+    androidStatus: 'Deprecated',
+  };
+
+  const description =
+    "Personas are used for rendering an individual's avatar and presence. Persona renders a PersonaCoin along with descriptive text components.";
+
+  return <Test name="Persona Test" description={description} sections={personaSections} status={status} />;
+};

package/src/TestComponents/Persona/StandardUsage.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { View, Text, Switch } from 'react-native';
+
+import type { PersonaSize } from '@fluentui/react-native';
+import { Persona } from '@fluentui/react-native';
+
+import { satyaImageUrl } from './styles';
+import { MenuPicker } from '../Common/MenuPicker';
+import { commonTestStyles as commonStyles } from '../Common/styles';
+import { undefinedText } from '../PersonaCoin/styles';
+
+type WithUndefined<T> = T | typeof undefinedText;
+
+const allSizes: WithUndefined<PersonaSize>[] = [
+  undefinedText,
+  'size8',
+  'size24',
+  'size32',
+  'size40',
+  'size48',
+  'size56',
+  'size72',
+  'size100',
+  'size120',
+];
+
+const allSizesCollection = allSizes.map((size) => {
+  return {
+    label: size,
+    value: size,
+  };
+});
+
+interface ISwitchWithLabelProps {
+  label: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+}
+
+function SwitchWithLabel(props: ISwitchWithLabelProps): React.ReactElement {
+  const { label, value, onValueChange } = props;
+  return (
+    <View style={commonStyles.switch}>
+      <Text>{label}</Text>
+      <Switch value={value} onValueChange={onValueChange} />
+    </View>
+  );
+}
+
+export const StandardUsage: React.FunctionComponent = () => {
+  const [showImage, setShowImage] = React.useState(true);
+  const [showPrimary, setShowPrimary] = React.useState(true);
+  const [showSecondary, setShowSecondary] = React.useState(true);
+  const [showTertiary, setShowTertiary] = React.useState(true);
+  const [showOptional, setShowOptional] = React.useState(true);
+  const [imageSize, setImageSize] = React.useState<PersonaSize | undefined>('size72');
+
+  return (
+    <View style={commonStyles.root}>
+      {/* settings */}
+      <View style={commonStyles.settings}>
+        <SwitchWithLabel label="Show image" value={showImage} onValueChange={setShowImage} />
+        <SwitchWithLabel label="Show primary text" value={showPrimary} onValueChange={setShowPrimary} />
+        <SwitchWithLabel label="Show secondary text" value={showSecondary} onValueChange={setShowSecondary} />
+        <SwitchWithLabel label="Show tertiary text" value={showTertiary} onValueChange={setShowTertiary} />
+        <SwitchWithLabel label="Show optional text" value={showOptional} onValueChange={setShowOptional} />
+        <MenuPicker
+          prompt="Size"
+          style={commonStyles.header}
+          selected={imageSize || undefinedText}
+          onChange={(size: PersonaSize | typeof undefinedText) => setImageSize(size === undefinedText ? undefined : size)}
+          collection={allSizesCollection}
+        />
+      </View>
+
+      <Persona
+        text={showPrimary ? 'Satya Nadella' : undefined}
+        secondaryText={showSecondary ? 'CEO' : undefined}
+        tertiaryText={showTertiary ? 'Microsoft' : undefined}
+        optionalText={showOptional ? 'Office of the CEO' : undefined}
+        size={imageSize}
+        initials="SN"
+        imageUrl={showImage ? satyaImageUrl : undefined}
+        imageDescription="Profile photo of Satya Nadella"
+        presence={'away'}
+      />
+    </View>
+  );
+};

package/src/TestComponents/Persona/index.ts

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

package/src/TestComponents/Persona/styles.ts

@@ -0,0 +1,6 @@
+export * from '../PersonaCoin/styles';
+
+export const satyaImageUrl =
+  'https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/MS-Exec-Nadella-Satya-2017-08-31-22_%28cropped%29.jpg/330px-MS-Exec-Nadella-Satya-2017-08-31-22_%28cropped%29.jpg';
+
+export const michaelImageUrl = 'https://upload.wikimedia.org/wikipedia/commons/3/31/Michael_Jackson_in_1988.jpg';

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

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

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

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