@fluentui-react-native/tester 0.78.2 → 0.79.0

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

@@ -1,157 +0,0 @@
-import * as React from 'react';
-import { PersonaCoin, IconAlignment } from '@fluentui/react-native';
-import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
-import { Slider } from '../Common/Slider';
-import { steveBallmerPhotoUrl } from './styles';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import { AlignmentPicker } from '../Common/AlignmentPicker';
-import { commonTestStyles as commonStyles } from '../Common/styles';
-
-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: TextStyle = {
-    borderColor: theme.colors.inputBorder,
-  };
-
-  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
-          style={[commonStyles.textBox, textBoxBorderStyle]}
-          placeholder="Background color"
-          blurOnSubmit={true}
-          onSubmitEditing={(e) => {
-            setCoinColor(e.nativeEvent.text);
-          }}
-        />
-
-        <TextInput
-          style={[commonStyles.textBox, textBoxBorderStyle]}
-          placeholder="Initials text color"
-          blurOnSubmit={true}
-          onSubmitEditing={(e) => {
-            setTextColor(e.nativeEvent.text);
-          }}
-        />
-
-        <TextInput
-          style={[commonStyles.textBox, textBoxBorderStyle]}
-          placeholder="Icon stroke color"
-          blurOnSubmit={true}
-          onSubmitEditing={(e) => {
-            setIconStrokeColor(e.nativeEvent.text);
-          }}
-        />
-
-        <TextInput
-          style={[commonStyles.textBox, textBoxBorderStyle]}
-          placeholder="Ring color"
-          blurOnSubmit={true}
-          onSubmitEditing={(e) => {
-            setRingColor(e.nativeEvent.text);
-          }}
-        />
-
-        <TextInput
-          style={[commonStyles.textBox, textBoxBorderStyle]}
-          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/FluentTester/index.ts

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

package/src/FluentTester/testPages.android.ts

@@ -1,142 +0,0 @@
-import { TestDescription } from './TestComponents';
-import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
-import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
-import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
-import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
-import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
-import { ContextualMenuTest, HOMEPAGE_CONTEXTUALMENU_BUTTON } from './TestComponents/ContextualMenu';
-import { DrawerTest, HOMEPAGE_DRAWER_BUTTON } from './TestComponents/Drawer';
-import { FocusTrapTest, HOMEPAGE_FOCUSTRAPZONE_BUTTON } from './TestComponents/FocusTrapZone';
-import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
-import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona';
-import { HOMEPAGE_PERSONACOIN_BUTTON, PersonaCoinTest } from './TestComponents/PersonaCoin';
-import { HOMEPAGE_PRESSABLE_BUTTON, PressableTest } from './TestComponents/Pressable';
-import { HOMEPAGE_RADIOGROUP_BUTTON, RadioGroupTest } from './TestComponents/RadioGroup';
-import { HOMEPAGE_SEPARATOR_BUTTON, SeparatorTest } from './TestComponents/Separator';
-import { HOMEPAGE_SHIMMER_BUTTON, ShimmerTest } from './TestComponents/Shimmer';
-import { HOMEPAGE_SVG_BUTTON, SvgTest } from './TestComponents/Svg';
-import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
-import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
-import { HOMEPAGE_ICON_BUTTON, IconTest } from './TestComponents/Icon';
-import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
-import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
-import { ExperimentalCheckboxTest, HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from './TestComponents/CheckboxExperimental';
-import { TextExperimentalTest, HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './TestComponents/TextExperimental';
-
-export const tests: TestDescription[] = [
-  {
-    name: 'ActivityIndicator Test',
-    component: ActivityIndicatorTest,
-    testPage: HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
-  },
-  {
-    name: 'Avatar Test',
-    component: AvatarTest,
-    testPage: HOMEPAGE_AVATAR_BUTTON,
-  },
-  {
-    name: 'Badge Test',
-    component: BadgeTest,
-    testPage: HOMEPAGE_BADGE,
-  },
-  {
-    name: 'Button Test',
-    component: ButtonTest,
-    testPage: HOMEPAGE_BUTTON_BUTTON,
-  },
-  {
-    name: 'Callout Test',
-    component: CalloutTest,
-    testPage: HOMEPAGE_CALLOUT_BUTTON,
-  },
-  {
-    name: 'ContextualMenu Test',
-    component: ContextualMenuTest,
-    testPage: HOMEPAGE_CONTEXTUALMENU_BUTTON,
-  },
-  {
-    name: 'Drawer Test',
-    component: DrawerTest,
-    testPage: HOMEPAGE_DRAWER_BUTTON,
-  },
-  {
-    name: 'Focus Trap Zone Test',
-    component: FocusTrapTest,
-    testPage: HOMEPAGE_FOCUSTRAPZONE_BUTTON,
-  },
-  {
-    name: 'Pressable Test',
-    component: PressableTest,
-    testPage: HOMEPAGE_PRESSABLE_BUTTON,
-  },
-  {
-    name: 'Link Test',
-    component: LinkTest,
-    testPage: HOMEPAGE_LINK_BUTTON,
-  },
-  {
-    name: 'Separator Test',
-    component: SeparatorTest,
-    testPage: HOMEPAGE_SEPARATOR_BUTTON,
-  },
-  {
-    name: 'Shimmer Test',
-    component: ShimmerTest,
-    testPage: HOMEPAGE_SHIMMER_BUTTON,
-  },
-  {
-    name: 'Text Test',
-    component: TextTest,
-    testPage: HOMEPAGE_TEXT_BUTTON,
-  },
-  {
-    name: 'Experimental Text Test',
-    component: TextExperimentalTest,
-    testPage: HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
-  },
-  {
-    name: 'Theme Test',
-    component: ThemeTest,
-    testPage: HOMEPAGE_THEME_BUTTON,
-  },
-  {
-    name: 'PersonaCoin Test',
-    component: PersonaCoinTest,
-    testPage: HOMEPAGE_PERSONACOIN_BUTTON,
-  },
-  {
-    name: 'RadioGroup Test',
-    component: RadioGroupTest,
-    testPage: HOMEPAGE_RADIOGROUP_BUTTON,
-  },
-  {
-    name: 'Persona Test',
-    component: PersonaTest,
-    testPage: HOMEPAGE_PERSONA_BUTTON,
-  },
-  {
-    name: 'Checkbox Test',
-    component: CheckboxTest,
-    testPage: HOMEPAGE_CHECKBOX_BUTTON,
-  },
-  {
-    name: 'Experimental Checkbox',
-    component: ExperimentalCheckboxTest,
-    testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
-  },
-  {
-    name: 'Svg Test',
-    component: SvgTest,
-    testPage: HOMEPAGE_SVG_BUTTON,
-  },
-  {
-    name: 'Icon Test',
-    component: IconTest,
-    testPage: HOMEPAGE_ICON_BUTTON,
-  },
-  {
-    name: 'Tokens Test',
-    component: TokenTest,
-    testPage: HOMEPAGE_TOKEN_BUTTON,
-  },
-];

package/src/FluentTester/testPages.windows.ts

@@ -1,106 +0,0 @@
-import { AvatarTest, HOMEPAGE_AVATAR_BUTTON } from './TestComponents/Avatar';
-import { ButtonTest, HOMEPAGE_BUTTON_BUTTON } from './TestComponents/Button';
-import { BadgeTest, HOMEPAGE_BADGE } from './TestComponents/Badge';
-import { CalloutTest, HOMEPAGE_CALLOUT_BUTTON } from './TestComponents/Callout';
-import { CheckboxTest, HOMEPAGE_CHECKBOX_BUTTON } from './TestComponents/Checkbox';
-// import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON, ExperimentalCheckboxTest } from './TestComponents/CheckboxExperimental';
-import { HOMEPAGE_LINK_BUTTON, LinkTest } from './TestComponents/Link';
-import { HOMEPAGE_PERSONA_BUTTON, PersonaTest } from './TestComponents/Persona';
-import { HOMEPAGE_PERSONACOIN_BUTTON, PersonaCoinTest } from './TestComponents/PersonaCoin';
-import { HOMEPAGE_PRESSABLE_BUTTON, PressableTest } from './TestComponents/Pressable';
-import { HOMEPAGE_SEPARATOR_BUTTON, SeparatorTest } from './TestComponents/Separator';
-import { HOMEPAGE_TEXT_BUTTON, TextTest } from './TestComponents/Text';
-import { HOMEPAGE_THEME_BUTTON, ThemeTest } from './TestComponents/Theme';
-import { HOMEPAGE_TABS_BUTTON, TabsTest } from './TestComponents/Tabs';
-import { HOMEPAGE_EXPERIMENTAL_TABS_BUTTON, ExperimentalTabsTest } from './TestComponents/TabsExperimental';
-import { HOMEPAGE_TOKEN_BUTTON, TokenTest } from './TestComponents/Tokens';
-import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON, TextExperimentalTest } from './TestComponents/TextExperimental';
-import { ActivityIndicatorTest, HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from './TestComponents/ActivityIndicator';
-
-export const tests = [
-  {
-    name: 'ActivityIndicator Test',
-    component: ActivityIndicatorTest,
-    testPage: HOMEPAGE_ACTIVITY_INDICATOR_BUTTON,
-  },
-  {
-    name: 'Avatar Test',
-    component: AvatarTest,
-    testPage: HOMEPAGE_AVATAR_BUTTON,
-  },
-  {
-    name: 'Badge Test',
-    component: BadgeTest,
-    testPage: HOMEPAGE_BADGE,
-  },
-  {
-    name: 'Button Test',
-    component: ButtonTest,
-    testPage: HOMEPAGE_BUTTON_BUTTON,
-  },
-  {
-    name: 'Callout Test',
-    component: CalloutTest,
-    testPage: HOMEPAGE_CALLOUT_BUTTON,
-  },
-  {
-    name: 'Pressable Test',
-    component: PressableTest,
-    testPage: HOMEPAGE_PRESSABLE_BUTTON,
-  },
-  { name: 'Link Test', component: LinkTest, testPage: HOMEPAGE_LINK_BUTTON },
-  {
-    name: 'Separator Test',
-    component: SeparatorTest,
-    testPage: HOMEPAGE_SEPARATOR_BUTTON,
-  },
-  { name: 'Text Test', component: TextTest, testPage: HOMEPAGE_TEXT_BUTTON },
-  {
-    name: 'Experimental Text Test',
-    component: TextExperimentalTest,
-    testPage: HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON,
-  },
-  { name: 'Theme Test', component: ThemeTest, testPage: HOMEPAGE_THEME_BUTTON },
-  {
-    name: 'PersonaCoin Test',
-    component: PersonaCoinTest,
-    testPage: HOMEPAGE_PERSONACOIN_BUTTON,
-  },
-  {
-    name: 'Persona Test',
-    component: PersonaTest,
-    testPage: HOMEPAGE_PERSONA_BUTTON,
-  },
-  {
-    name: 'Checkbox Test',
-    component: CheckboxTest,
-    testPage: HOMEPAGE_CHECKBOX_BUTTON,
-  },
-  // GH#935 Temporarily disabling while SVGs don't work in windows
-  // {
-  //   name: 'Experimental Checkbox',
-  //   component: ExperimentalCheckboxTest,
-  //   testPage: HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON,
-  // },
-  {
-    name: 'Tabs Test',
-    component: TabsTest,
-    testPage: HOMEPAGE_TABS_BUTTON,
-  },
-  {
-    name: 'Experimental Tabs Test',
-    component: ExperimentalTabsTest,
-    testPage: HOMEPAGE_EXPERIMENTAL_TABS_BUTTON,
-  },
-  {
-    name: 'Tokens Test',
-    component: TokenTest,
-    testPage: HOMEPAGE_TOKEN_BUTTON,
-  },
-  // GH##1027 Temporarily disabling while the test doesn't load
-  // {
-  //   name: 'Expander Test',
-  //   component: ExpanderTest,
-  //   testPage: HOMEPAGE_EXPANDER_BUTTON,
-  // },
-];