@fluentui-react-native/tester 0.78.3 → 0.79.1

package/src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -1,226 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Avatar, AvatarSize } from '@fluentui-react-native/avatar';
-import { View, Text, TextInput, Platform } from 'react-native';
-import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-import { FontWeight } from '@fluentui-react-native/theme-types';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../../test-data/test.svg';
-import { ToggleButton } from '@fluentui/react-native';
-
-export const CustomizeUsage: React.FunctionComponent = () => {
-  const [showImage, setShowImage] = useState(true);
-  const [showInitials, setShowInitials] = useState(true);
-  const [avatarColor, setAvatarColor] = useState<string>();
-  const [textColor, setTextColor] = useState<string>();
-  const [size, setSize] = useState<string>('96');
-  const [iconSize, setIconSize] = useState<number>(24);
-  const [iconColor, setIconColor] = useState<string>(undefined);
-  const [initialsSize, setInitialsSize] = useState<number>(16);
-  const [fontWeight, setFontWeight] = useState<string>('normal');
-  const [fontFamily, setFontFamily] = useState<string>('Georgia');
-  const [name, setName] = useState<string>('Steve Ballmer');
-  const [initials, setInitials] = useState<string>('');
-
-  const [ringColor, setRingColor] = useState<string>(undefined);
-  const [ringBackgroundColor, setRingBackgroundColor] = useState<string>('yellow');
-  const [ringThickness, setRingThickness] = useState<string>('4');
-  const [showRing, setShowRing] = useState<boolean>(true);
-
-  const CustomizedAvatar = useMemo(() => {
-    const tokens = {
-      avatarColor,
-      color: textColor,
-      size: parseInt(size) as AvatarSize,
-      iconSize: iconSize,
-      iconColor,
-      fontSize: initialsSize,
-      fontWeight: fontWeight as FontWeight,
-      fontFamily,
-      ringColor,
-      ringBackgroundColor,
-      ringThickness: parseInt(ringThickness),
-    };
-    return Avatar.customize(tokens);
-  }, [
-    avatarColor,
-    textColor,
-    iconColor,
-    iconSize,
-    initialsSize,
-    size,
-    ringColor,
-    ringBackgroundColor,
-    ringThickness,
-    fontWeight,
-    fontFamily,
-  ]);
-
-  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
-  return (
-    <View style={commonStyles.root}>
-      <View style={commonStyles.settings}>
-        <ToggleButton onClick={() => setShowImage(!showImage)} checked={showImage} style={commonStyles.vmargin}>
-          {showImage ? 'Hide' : 'Show'} image
-        </ToggleButton>
-        <ToggleButton onClick={() => setShowInitials(!showInitials)} checked={showInitials} style={commonStyles.vmargin}>
-          {showInitials ? 'Hide' : 'Show'} initials
-        </ToggleButton>
-        <ToggleButton onClick={() => setShowRing(!showRing)} checked={showRing} style={commonStyles.vmargin}>
-          {showRing ? 'Hide' : 'Show'} ring
-        </ToggleButton>
-        <View style={{ flexDirection: 'row' }}>
-          <View>
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Name for generating initials"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setName(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Initials"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setInitials(e.nativeEvent.text);
-              }}
-            />
-            <Text style={{ fontWeight: 'bold' }}>Avatar tokens</Text>
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Background color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setAvatarColor(e.nativeEvent.text);
-              }}
-            />
-
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Avatar size"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setSize(e.nativeEvent.text);
-              }}
-            />
-
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Icon size"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setIconSize(parseInt(e.nativeEvent.text));
-              }}
-            />
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Icon color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setIconColor(e.nativeEvent.text);
-              }}
-            />
-            <Text style={{ fontWeight: 'bold' }}>Ring tokens</Text>
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Ring background color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setRingBackgroundColor(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Ring color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setRingColor(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Ring thickness"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setRingThickness(e.nativeEvent.text);
-              }}
-            />
-          </View>
-          <View style={{ paddingHorizontal: 20 }}>
-            <Text style={{ fontWeight: 'bold' }}>Font tokens</Text>
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Initials text color"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setTextColor(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Initials size"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setInitialsSize(parseInt(e.nativeEvent.text));
-              }}
-            />
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Font weight"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setFontWeight(e.nativeEvent.text);
-              }}
-            />
-            <TextInput
-              style={[commonStyles.textBox]}
-              placeholder="Font family"
-              blurOnSubmit={true}
-              onSubmitEditing={(e) => {
-                setFontFamily(e.nativeEvent.text);
-              }}
-            />
-          </View>
-        </View>
-      </View>
-      <View>
-        <Text>Customized Avatar</Text>
-        <CustomizedAvatar
-          active="active"
-          activeAppearance="ring"
-          avatarColor={avatarColor}
-          accessibilityLabel="Former CEO of Microsoft"
-          initials={showInitials ? initials : undefined}
-          name={showInitials ? name : undefined}
-          imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
-          icon={svgIconsEnabled ? { svgSource: svgProps } : undefined}
-          transparentRing={!showRing}
-        />
-      </View>
-      <View style={{ marginLeft: 20 }}>
-        <Text>Avatar customized with props</Text>
-        <Avatar
-          active="active"
-          activeAppearance="ring"
-          avatarColor={avatarColor}
-          accessibilityLabel="Former CEO of Microsoft"
-          initials={showInitials ? initials : undefined}
-          name={showInitials ? name : undefined}
-          imageUrl={showImage ? steveBallmerPhotoUrl : undefined}
-          ringBackgroundColor={ringBackgroundColor}
-          ringColor={ringColor}
-          ringThickness={parseInt(ringThickness)}
-          size={parseInt(size) as AvatarSize}
-          transparentRing={!showRing}
-        />
-      </View>
-    </View>
-  );
-};

package/src/FluentTester/TestComponents/Button/ButtonIconTestSection.tsx

@@ -1,78 +0,0 @@
-import { ButtonV1 as Button } from '@fluentui/react-native';
-import * as React from 'react';
-import { Platform, View, StyleSheet } from 'react-native';
-import { commonTestStyles, stackStyle } from '../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from './test.svg';
-import { SvgXml } from 'react-native-svg';
-
-const styles = StyleSheet.create({
-  chevron: { paddingStart: 4 },
-});
-
-export const ButtonIconTest: React.FunctionComponent = () => {
-  const fontBuiltInProps = {
-    fontFamily: 'Arial',
-    codepoint: 0x2663,
-    fontSize: 24,
-  };
-
-  /* eslint-disable @typescript-eslint/no-var-requires */
-  const testImage = require('../../test-data/icon_24x24.png');
-
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-
-  const chevronXml = `
-          <svg width="12" height="16" viewBox="0 0 11 6" color="#000">
-            <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
-          </svg>`;
-
-  return (
-    <View style={[stackStyle, commonTestStyles.view]}>
-      <Button icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }} style={commonTestStyles.vmargin}>
-        Font icon
-      </Button>
-      <Button
-        icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }}
-        style={commonTestStyles.vmargin}
-        iconPosition="after"
-      >
-        Icon after
-      </Button>
-      <Button icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
-        Font icon
-      </Button>
-      <Button appearance="primary" icon={{ fontSource: fontBuiltInProps }} style={commonTestStyles.vmargin}>
-        Font icon
-      </Button>
-      {svgIconsEnabled && (
-        <>
-          <Button appearance="primary" icon={{ svgSource: svgProps, color: 'red' }} style={commonTestStyles.vmargin}>
-            SVG
-          </Button>
-          <Button icon={{ svgSource: svgProps }} style={commonTestStyles.vmargin}>
-            SVG
-          </Button>
-        </>
-      )}
-      <Button appearance="primary" icon={testImage} style={commonTestStyles.vmargin}>
-        PNG
-      </Button>
-      <Button icon={testImage} style={commonTestStyles.vmargin}>
-        PNG
-      </Button>
-      {svgIconsEnabled && (
-        <Button style={commonTestStyles.vmargin} icon={{ svgSource: svgProps }}>
-          Icon Button and Chevron
-          <View style={styles.chevron}>
-            <SvgXml xml={chevronXml} />
-          </View>
-        </Button>
-      )}
-    </View>
-  );
-};

package/src/FluentTester/TestComponents/Button/deprecated/ButtonIconTest.tsx

@@ -1,43 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import { Button, Text } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import * as React from 'react';
-import { Platform, View } from 'react-native';
-import { stackStyle } from '../../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
-import TestSvg from '../test.svg';
-
-const CustomizedIconButton = Button.customize({
-  tokens: { iconColor: 'red' },
-  content: { style: { marginStart: 5 } },
-});
-
-export const ButtonIconTest_deprecated: React.FunctionComponent = () => {
-  /* eslint-disable @typescript-eslint/no-var-requires */
-  const testImage = require('../../../test-data/icon_24x24.png');
-
-  const svgProps: SvgIconProps = {
-    src: TestSvg,
-    viewBox: '0 0 500 500',
-  };
-
-  // SVG-based icons are not available on all platforms yet
-  const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
-  const iconProps = { svgSource: svgProps, width: 20, height: 20 };
-
-  return (
-    <View>
-      <Stack style={stackStyle}>
-        <Button startIcon={testImage} content="Button with png Icon" tooltip="button tooltip" />
-        {svgIconsEnabled ? (
-          <Button startIcon={{ ...iconProps, color: 'red' }} content="Button with svg Icon" tooltip="button tooltip" />
-        ) : null}
-        {svgIconsEnabled ? (
-          <CustomizedIconButton startIcon={iconProps} content="Button with Customized Icon" tooltip="button tooltip" />
-        ) : null}
-        <Text>End Button icon</Text>
-        {svgIconsEnabled ? <CustomizedIconButton endIcon={iconProps} content="Button with Right Icon" tooltip="button tooltip" /> : null}
-      </Stack>
-    </View>
-  );
-};

package/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx

@@ -1,180 +0,0 @@
-import { Checkbox } from '@fluentui/react-native';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import * as React from 'react';
-import { View, TextInput, TextStyle } from 'react-native';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-import { CHECKBOX_TESTPAGE } from './consts';
-import { E2ECheckboxTest } from './CheckboxE2ETest';
-import { Test, TestSection, PlatformStatus } from '../Test';
-
-function onChangeUncontrolled(isChecked: boolean) {
-  console.log(isChecked);
-}
-
-const BasicCheckbox: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Checkbox label="Unchecked checkbox (undefined)" onChange={onChangeUncontrolled} />
-      <Checkbox label="Unchecked checkbox (uncontrolled)" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <Checkbox
-        label="Checked checkbox (uncontrolled)"
-        onChange={onChangeUncontrolled}
-        defaultChecked={true}
-        accessibilityLabel="Hello there"
-      />
-      <Checkbox label="Disabled checkbox" onChange={onChangeUncontrolled} defaultChecked={false} disabled={true} />
-      <Checkbox label="Disabled checked checkbox" onChange={onChangeUncontrolled} defaultChecked={true} disabled={true} />
-      <Checkbox label="Checkbox will display a tooltip" onChange={onChangeUncontrolled} tooltip="This is a tooltip" />
-    </View>
-  );
-};
-
-const OtherCheckbox: React.FunctionComponent = () => {
-  const [isCheckedControlled1, setCheckedControlled1] = React.useState(false);
-  const onChangeControlled1 = React.useCallback((checked) => {
-    setCheckedControlled1(checked);
-  }, []);
-
-  const [isCheckedControlled2, setCheckedControlled2] = React.useState(true);
-  const onChangeControlled2 = React.useCallback((checked) => {
-    setCheckedControlled2(checked);
-  }, []);
-
-  return (
-    <View>
-      <Checkbox label="This is a controlled Checkbox" onChange={onChangeControlled1} checked={isCheckedControlled1} />
-      <Checkbox
-        label="Checkbox rendered with boxSide 'end' (controlled)"
-        onChange={onChangeControlled2}
-        boxSide="end"
-        checked={isCheckedControlled2}
-      />
-    </View>
-  );
-};
-
-const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
-
-const CircleColorCheckbox = Checkbox.customize({
-  tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
-  _overrides: {
-    checked: {
-      tokens: {
-        checkboxBackgroundColor: 'green',
-        checkboxBorderColor: 'green',
-        checkmarkColor: 'white',
-      },
-    },
-    focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-    hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-    pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
-  },
-});
-
-const HoverCheckbox = Checkbox.customize({
-  _overrides: {
-    checked: {
-      tokens: {
-        checkboxBackgroundColor: 'black',
-        checkmarkColor: 'white',
-      },
-    },
-    hovered: {
-      tokens: {
-        checkmarkVisibility: 1,
-      },
-    },
-  },
-});
-
-const TokenCheckbox: React.FunctionComponent = () => {
-  const [checkboxColor, setCheckboxColor] = React.useState('blue');
-  const [checkmarkColor, setCheckmarkColor] = React.useState('white');
-
-  const BlueCheckbox = Checkbox.customize({
-    tokens: { checkboxBackgroundColor: 'white' },
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: checkboxColor,
-          checkboxBorderColor: checkboxColor,
-          checkmarkColor: checkmarkColor,
-        },
-      },
-      focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
-    },
-  });
-
-  const theme = useTheme();
-  const textBoxBorderStyle: TextStyle = {
-    borderColor: theme.colors.inputBorder,
-  };
-  return (
-    <View>
-      <CircularCheckbox label="A circular checkbox" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <CircleColorCheckbox label="A circular token-customized checkbox" onChange={onChangeUncontrolled} defaultChecked={true} />
-      <BlueCheckbox
-        label="Token-customized checkbox. Customizable below."
-        onChange={onChangeUncontrolled}
-        boxSide="end"
-        defaultChecked={false}
-      />
-
-      <TextInput
-        style={[commonStyles.textBox, textBoxBorderStyle]}
-        placeholder="Background color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckboxColor(e.nativeEvent.text);
-        }}
-      />
-
-      <TextInput
-        style={[commonStyles.textBox, textBoxBorderStyle]}
-        placeholder="Checkmark color"
-        blurOnSubmit={true}
-        onSubmitEditing={(e) => {
-          setCheckmarkColor(e.nativeEvent.text);
-        }}
-      />
-    </View>
-  );
-};
-
-const checkboxSections: TestSection[] = [
-  {
-    name: 'Basic Checkboxes',
-    testID: CHECKBOX_TESTPAGE,
-    component: BasicCheckbox,
-  },
-  {
-    name: 'Other Implementations',
-    component: OtherCheckbox,
-  },
-  {
-    name: 'Token Customized Checkboxes',
-    component: TokenCheckbox,
-  },
-  {
-    name: 'Checkbox for E2E Testing',
-    component: E2ECheckboxTest,
-  },
-];
-
-export const CheckboxTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Beta',
-    uwpStatus: 'Experimental',
-    iosStatus: 'N/A',
-    macosStatus: 'Experimental',
-    androidStatus: 'N/A',
-  };
-
-  const description =
-    'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
-
-  return <Test name="Checkbox Test" description={description} sections={checkboxSections} status={status} />;
-};