@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx

@@ -1,117 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { Shadow } from '@fluentui-react-native/experimental-shadow';
-import type { Theme } from '@fluentui-react-native/framework';
-import { useFluentTheme } from '@fluentui-react-native/framework';
-import { mergeStyles } from '@fluentui-react-native/framework-base';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-
-import { shadowTestPageStyles } from './ShadowTestPageStyles';
-
-const getThemedStyles = themedStyleSheet((t: Theme) => {
-  const defaultShadowTestBoxPropsWithoutSpacing = {
-    maxWidth: 732,
-    minHeight: 64,
-    ...shadowTestPageStyles(t).backgroundColor,
-  };
-  const marginTestProps = {
-    marginVertical: 16,
-    marginHorizontal: 32,
-  };
-  const paddingTestProps = {
-    padding: 20,
-  };
-
-  return {
-    headerTextPadding: {
-      padding: 16,
-    },
-    defaultShadowTestBoxPropsWithoutSpacing,
-    defaultShadowTestBoxProps: {
-      ...defaultShadowTestBoxPropsWithoutSpacing,
-      ...marginTestProps,
-      ...paddingTestProps,
-    },
-    marginTestProps,
-    paddingTestProps,
-    borderRadiusTestProps: {
-      borderRadius: 8,
-    },
-    borderWidthTestProps: {
-      borderWidth: 2,
-      borderColor: 'black',
-    },
-    offsetTestProps: { start: 10 },
-    alignItemsTestProps: { alignItems: 'flex-start' },
-    flexDirectionTestProps: { flexDirection: 'row' },
-    flexWrapTestProps: { flexWrap: 'wrap' },
-  };
-});
-
-export const ShadowWithDifferentPropsTestSection: React.FunctionComponent = () => {
-  const theme = useFluentTheme();
-  const themedStyles = getThemedStyles(theme);
-
-  return (
-    <View style={shadowTestPageStyles(theme).backgroundColor}>
-      <Text style={themedStyles.headerTextPadding}>
-        The following tests have a Shadow16 set on a child view that has some specific props.
-      </Text>
-      <View>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View style={themedStyles.defaultShadowTestBoxProps}>
-            <Text variant="bodySemibold">padding: 20, marginVertical: 16, marginHorizontal: 32</Text>
-          </View>
-        </Shadow>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View style={mergeStyles(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.paddingTestProps)}>
-            <Text variant="bodySemibold">padding only</Text>
-          </View>
-        </Shadow>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View style={mergeStyles(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.marginTestProps)}>
-            <Text variant="bodySemibold">margins only</Text>
-          </View>
-        </Shadow>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps)}>
-            <Text variant="bodySemibold">borderRadius: 8</Text>
-          </View>
-        </Shadow>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View
-            style={mergeStyles(
-              themedStyles.defaultShadowTestBoxProps,
-              themedStyles.borderRadiusTestProps,
-              themedStyles.borderWidthTestProps,
-            )}
-          >
-            <Text variant="bodySemibold">borderWidth: 2</Text>
-          </View>
-        </Shadow>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.offsetTestProps)}>
-            <Text variant="bodySemibold">start: 10</Text>
-          </View>
-        </Shadow>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.alignItemsTestProps)}>
-            <Text variant="bodySemibold">alignItems: flex-start</Text>
-          </View>
-        </Shadow>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.flexDirectionTestProps)}>
-            <Text variant="bodySemibold">flexDirection: row</Text>
-          </View>
-        </Shadow>
-        <Shadow shadowToken={theme.shadows.shadow16}>
-          <View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.flexWrapTestProps)}>
-            <Text variant="bodySemibold">flexWrap: wrap</Text>
-          </View>
-        </Shadow>
-      </View>
-    </View>
-  );
-};

package/src/TestComponents/Shadow/index.ts

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

package/src/TestComponents/Shimmer/ShimmerE2ETest.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-import { SHIMMER_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
-import { Shimmer } from '@fluentui-react-native/experimental-shimmer';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { shimmerRectsAndRect } from './ShimmerTestElementSets';
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const E2ETestingShimmer: React.FunctionComponent<Record<string, never>> = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Shimmer
-        elements={shimmerRectsAndRect()}
-        duration={2000}
-        delay={1000}
-        style={{ width: 300, height: 100 }}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(SHIMMER_TEST_COMPONENT)}
-      />
-    </Stack>
-  );
-};

package/src/TestComponents/Shimmer/ShimmerTest.tsx

@@ -1,142 +0,0 @@
-import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
-
-import { SHIMMER_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Shimmer } from '@fluentui-react-native/experimental-shimmer';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { E2ETestingShimmer } from './ShimmerE2ETest';
-import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets';
-import { stackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const TestCompareCustomizeShimmer = Shimmer.customize({
-  shimmerWaveColor: 'blue',
-  shimmerColor: 'orange',
-  backgroundColor: 'red',
-});
-
-const shimmerStyles = StyleSheet.create({
-  smallCustomizedShimmer: { height: 100, width: '50%', borderWidth: 2, borderColor: 'black' },
-  smallRoundedCustomizedShimmer: { height: 100, width: 150, borderRadius: 20, borderWidth: 2, borderColor: 'black' },
-  mediumShimmer: { width: 300, height: 100 },
-  largeShimmer: { width: 800, height: 400 },
-});
-
-export const CustomizeAndTokenPropsShimmers: React.FunctionComponent = () => {
-  return (
-    <Stack style={{ margin: 4 }}>
-      <TestCompareCustomizeShimmer
-        elements={shimmerRectsAndCircle()}
-        duration={2000}
-        delay={1000}
-        style={shimmerStyles.smallCustomizedShimmer}
-      />
-
-      <Shimmer
-        elements={shimmerRectsAndCircle()}
-        duration={2000}
-        delay={1000}
-        style={shimmerStyles.smallCustomizedShimmer}
-        shimmerWaveColor="blue"
-        shimmerColor="orange"
-        backgroundColor="red"
-      />
-    </Stack>
-  );
-};
-
-export const RoundedCornerClipCheckShimmer: React.FunctionComponent = () => {
-  return (
-    <Stack style={{ margin: 4 }}>
-      <Shimmer
-        elements={shimmerRectsAndCircle()}
-        duration={2000}
-        delay={1000}
-        style={shimmerStyles.smallRoundedCustomizedShimmer}
-        backgroundColor="teal"
-      />
-    </Stack>
-  );
-};
-
-const RectShimmers: React.FunctionComponent<Record<string, never>> = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Shimmer elements={shimmerRectsAndRect()} style={shimmerStyles.mediumShimmer} />
-    </Stack>
-  );
-};
-
-const RectCircleShimmers: React.FunctionComponent<Record<string, never>> = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Shimmer elements={shimmerRectsAndCircle()} duration={3000} delay={1000} style={shimmerStyles.mediumShimmer} />
-    </Stack>
-  );
-};
-
-const CustomizedShimmer: React.FunctionComponent<Record<string, never>> = () => {
-  return (
-    <Stack style={stackStyle}>
-      <CustomizeAndTokenPropsShimmers />
-      <RoundedCornerClipCheckShimmer />
-    </Stack>
-  );
-};
-
-const ShimmerBorderRadii: React.FunctionComponent<Record<string, never>> = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Shimmer elements={shimmerBorderRadiusTests()} duration={3000} style={shimmerStyles.largeShimmer} />
-    </Stack>
-  );
-};
-
-const shimmerSections: TestSection[] = [
-  {
-    name: 'Shimmer Rects',
-    testID: SHIMMER_TESTPAGE,
-    component: RectShimmers,
-  },
-  {
-    name: 'Shimmer Rects and Circle',
-    testID: SHIMMER_TESTPAGE,
-    component: RectCircleShimmers,
-  },
-  ...Platform.select({
-    android: [null],
-    default: [
-      {
-        name: 'Border Radius Tests',
-        testID: SHIMMER_TESTPAGE,
-        component: ShimmerBorderRadii,
-      },
-      {
-        name: 'Customized Shimmer',
-        testID: SHIMMER_TESTPAGE,
-        component: CustomizedShimmer,
-      },
-    ],
-  }),
-  {
-    name: 'Shimmer for E2E Testing',
-    component: E2ETestingShimmer,
-  },
-];
-
-export const ShimmerTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description =
-    'Shimmer is a temporary animation placeholder for when a service call takes time to return data but the rest of the UI should continue rendering.';
-
-  return <Test name="Shimmer Test" description={description} sections={shimmerSections} status={status} />;
-};

package/src/TestComponents/Shimmer/ShimmerTestElementSets.tsx

@@ -1,55 +0,0 @@
-import type { ShimmerRectElement, ShimmerCircleElement } from '@fluentui-react-native/experimental-shimmer';
-
-export function shimmerRects(): Array<ShimmerRectElement | ShimmerCircleElement> {
-  return [
-    {
-      type: 'rect',
-      borderRadiusX: 3,
-      borderRadiusY: 3,
-      width: 100,
-      height: 20,
-      x: 90,
-      y: 70,
-    },
-    {
-      type: 'rect',
-      borderRadiusX: 3,
-      borderRadiusY: 3,
-      width: 150,
-      height: 20,
-      x: 90,
-      y: 42,
-    },
-    {
-      type: 'rect',
-      borderRadiusX: 3,
-      borderRadiusY: 3,
-      width: 200,
-      height: 20,
-      x: 90,
-      y: 15,
-    },
-  ];
-}
-
-export function shimmerRectsAndRect(): Array<ShimmerRectElement | ShimmerCircleElement> {
-  return shimmerRects().concat([{ type: 'rect', borderRadiusX: 3, borderRadiusY: 3, height: 60, width: 60, x: 10, y: 25 }]);
-}
-
-export function shimmerRectsAndCircle(): Array<ShimmerRectElement | ShimmerCircleElement> {
-  return shimmerRects().concat([{ type: 'circle', radius: 30, cx: 40, cy: 55 }]);
-}
-/**
- * Matches rectsRoundRectsCircles.svg to show the border radii all create equal width/height rounded rects.
- */
-export function shimmerBorderRadiusTests(): Array<ShimmerRectElement | ShimmerCircleElement> {
-  return [
-    { type: 'rect', x: 10, y: 10, borderRadiusX: 0, borderRadiusY: 0, width: 240, height: 120 },
-    { type: 'rect', x: 250, y: 10, borderRadiusX: 50, borderRadiusY: 30, width: 240, height: 120 },
-    { type: 'rect', x: 490, y: 10, borderRadiusX: 40, borderRadiusY: 40, width: 240, height: 120 },
-    { type: 'rect', x: 10, y: 130, borderRadiusX: 50, borderRadiusY: 30, width: 240, height: 120 },
-    { type: 'rect', x: 250, y: 130, borderRadiusX: 40, borderRadiusY: 40, width: 240, height: 120 },
-    { type: 'circle', cx: 550, cy: 190, radius: 60 },
-    { type: 'circle', cx: 670, cy: 190, radius: 60 },
-  ];
-}

package/src/TestComponents/Shimmer/iconImageSource.tsx

@@ -1,5 +0,0 @@
-import type { ImageURISource } from 'react-native';
-
-export const icon: ImageURISource = {
-  uri: 'data:image/png;base64,/9j/4AAQSkZJRgABAQABLAEsAAD/4QCARXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAAEsAAAAAQAAASwAAAABAAKgAgAEAAAAAQAAAMigAwAEAAAAAQAAAMgAAAAA/+EJ2Wh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8APD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphZjRmMjAyMy02MmIzLTQ5MDMtOTkyOS1kNTk1MDcyNzAwYjMiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnN0b2NrOjhhYzBiZjc1LTkzZTktNGUyOC05YzY5LTA2ZjFlNmNiYmIxOSIvPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDw/eHBhY2tldCBlbmQ9InciPz4A/+0AOFBob3Rvc2hvcCAzLjAAOEJJTQQEAAAAAAAAOEJJTQQlAAAAAAAQ1B2M2Y8AsgTpgAmY7PhCfv/iEXhJQ0NfUFJPRklMRQABAQAAEWhhcHBsAgAAAG1udHJHUkFZWFlaIAfcAAgAFwAPAC4AD2Fjc3BBUFBMAAAAAG5vbmUAAAAAAAAAAAAAAAAAAAAAAAD21gABAAAAANMtYXBwbAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWRlc2MAAADAAAAAeWRzY20AAAE8AAAH6GNwcnQAAAkkAAAAI3d0cHQAAAlIAAAAFGtUUkMAAAlcAAAIDGRlc2MAAAAAAAAAH0dlbmVyaWMgR3JheSBHYW1tYSAyLjIgUHJvZmlsZQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABtbHVjAAAAAAAAAB8AAAAMc2tTSwAAAC4AAAGEZGFESwAAADgAAAGyY2FFUwAAADgAAAHqdmlWTgAAAEAAAAIicHRCUgAAAEoAAAJidWtVQQAAACwAAAKsZnJGVQAAAD4AAALYaHVIVQAAADQAAAMWemhUVwAAAB4AAANKbmJOTwAAADoAAANoY3NDWgAAACgAAAOiaGVJTAAAACQAAAPKaXRJVAAAAE4AAAPucm9STwAAACoAAAQ8ZGVERQAAAE4AAARma29LUgAAACIAAAS0c3ZTRQAAADgAAAGyemhDTgAAAB4AAATWamFKUAAAACYAAAT0ZWxHUgAAACoAAAUacHRQTwAAAFIAAAVEbmxOTAAAAEAAAAWWZXNFUwAAAEwAAAXWdGhUSAAAADIAAAYidHJUUgAAACQAAAZUZmlGSQAAAEYAAAZ4aHJIUgAAAD4AAAa+cGxQTAAAAEoAAAb8cnVSVQAAADoAAAdGZW5VUwAAADwAAAeAYXJFRwAAACwAAAe8AFYBYQBlAG8AYgBlAGMAbgDhACAAcwBpAHYA4QAgAGcAYQBtAGEAIAAyACwAMgBHAGUAbgBlAHIAaQBzAGsAIABnAHIA5QAgADIALAAyACAAZwBhAG0AbQBhAHAAcgBvAGYAaQBsAEcAYQBtAG0AYQAgAGQAZQAgAGcAcgBpAHMAbwBzACAAZwBlAG4A6AByAGkAYwBhACAAMgAuADIAQx6lAHUAIABoAOwAbgBoACAATQDgAHUAIAB4AOEAbQAgAEMAaAB1AG4AZwAgAEcAYQBtAG0AYQAgADIALgAyAFAAZQByAGYAaQBsACAARwBlAG4A6QByAGkAYwBvACAAZABhACAARwBhAG0AYQAgAGQAZQAgAEMAaQBuAHoAYQBzACAAMgAsADIEFwQwBDMEMAQ7BEwEPQQwACAARwByAGEAeQAtBDMEMAQ8BDAAIAAyAC4AMgBQAHIAbwBmAGkAbAAgAGcA6QBuAOkAcgBpAHEAdQBlACAAZwByAGkAcwAgAGcAYQBtAG0AYQAgADIALAAyAMEAbAB0AGEAbADhAG4AbwBzACAAcwB6APwAcgBrAGUAIABnAGEAbQBtAGEAIAAyAC4AMpAadShwcJaOUUlepgAgADIALgAyACCCcl9pY8+P8ABHAGUAbgBlAHIAaQBzAGsAIABnAHIA5QAgAGcAYQBtAG0AYQAgADIALAAyAC0AcAByAG8AZgBpAGwATwBiAGUAYwBuAOEAIAFhAGUAZADhACAAZwBhAG0AYQAgADIALgAyBdIF0AXeBdQAIAXQBeQF1QXoACAF2wXcBdwF2QAgADIALgAyAFAAcgBvAGYAaQBsAG8AIABnAHIAaQBnAGkAbwAgAGcAZQBuAGUAcgBpAGMAbwAgAGQAZQBsAGwAYQAgAGcAYQBtAG0AYQAgADIALAAyAEcAYQBtAGEAIABnAHIAaQAgAGcAZQBuAGUAcgBpAGMBAwAgADIALAAyAEEAbABsAGcAZQBtAGUAaQBuAGUAcwAgAEcAcgBhAHUAcwB0AHUAZgBlAG4ALQBQAHIAbwBmAGkAbAAgAEcAYQBtAG0AYQAgADIALAAyx3y8GAAg1ozAyQAgrBC5yAAgADIALgAyACDVBLhc0wzHfGZukBpwcF6mfPtlcAAgADIALgAyACBjz4/wZYdO9k4AgiwwsDDsMKQwrDDzMN4AIAAyAC4AMgAgMNcw7TDVMKEwpDDrA5MDtQO9A7kDugPMACADkwO6A8EDuQAgA5MDrAO8A7wDsQAgADIALgAyAFAAZQByAGYAaQBsACAAZwBlAG4A6QByAGkAYwBvACAAZABlACAAYwBpAG4AegBlAG4AdABvAHMAIABkAGEAIABHAGEAbQBtAGEAIAAyACwAMgBBAGwAZwBlAG0AZQBlAG4AIABnAHIAaQBqAHMAIABnAGEAbQBtAGEAIAAyACwAMgAtAHAAcgBvAGYAaQBlAGwAUABlAHIAZgBpAGwAIABnAGUAbgDpAHIAaQBjAG8AIABkAGUAIABnAGEAbQBtAGEAIABkAGUAIABnAHIAaQBzAGUAcwAgADIALAAyDiMOMQ4HDioONQ5BDgEOIQ4hDjIOQA4BDiMOIg5MDhcOMQ5IDicORA4bACAAMgAuADIARwBlAG4AZQBsACAARwByAGkAIABHAGEAbQBhACAAMgAsADIAWQBsAGUAaQBuAGUAbgAgAGgAYQByAG0AYQBhAG4AIABnAGEAbQBtAGEAIAAyACwAMgAgAC0AcAByAG8AZgBpAGkAbABpAEcAZQBuAGUAcgBpAQ0AawBpACAARwByAGEAeQAgAEcAYQBtAG0AYQAgADIALgAyACAAcAByAG8AZgBpAGwAVQBuAGkAdwBlAHIAcwBhAGwAbgB5ACAAcAByAG8AZgBpAGwAIABzAHoAYQByAG8BWwBjAGkAIABnAGEAbQBtAGEAIAAyACwAMgQeBDEESQQwBE8AIARBBDUEQAQwBE8AIAQzBDAEPAQ8BDAAIAAyACwAMgAtBD8EQAQ+BEQEOAQ7BEwARwBlAG4AZQByAGkAYwAgAEcAcgBhAHkAIABHAGEAbQBtAGEAIAAyAC4AMgAgAFAAcgBvAGYAaQBsAGUGOgYnBkUGJwAgADIALgAyACAGRAZIBkYAIAYxBkUGJwYvBkoAIAY5BicGRXRleHQAAAAAQ29weXJpZ2h0IEFwcGxlIEluYy4sIDIwMTIAAFhZWiAAAAAAAADzUQABAAAAARbMY3VydgAAAAAAAAQAAAAABQAKAA8AFAAZAB4AIwAoAC0AMgA3ADsAQABFAEoATwBUAFkAXgBjAGgAbQByAHcAfACBAIYAiwCQAJUAmgCfAKQAqQCuALIAtwC8AMEAxgDLANAA1QDbAOAA5QDrAPAA9gD7AQEBBwENARMBGQEfASUBKwEyATgBPgFFAUwBUgFZAWABZwFuAXUBfAGDAYsBkgGaAaEBqQGxAbkBwQHJAdEB2QHhAekB8gH6AgMCDAIUAh0CJgIvAjgCQQJLAlQCXQJnAnECegKEAo4CmAKiAqwCtgLBAssC1QLgAusC9QMAAwsDFgMhAy0DOANDA08D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',
-};

package/src/TestComponents/Shimmer/index.ts

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

package/src/TestComponents/Spacing/SpacingTest.tsx

@@ -1,71 +0,0 @@
-import * as React from 'react';
-import { Text, View } from 'react-native';
-
-import { SPACING_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
-
-import { stackStyle } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const BasicUsage: React.FunctionComponent = () => {
-  function spacingExample(tokenName: string, spacing?: number) {
-    return (
-      <View>
-        <Text>
-          {tokenName} ({spacing})
-        </Text>
-        <View style={{ flexDirection: 'row', alignItems: 'baseline' }}>
-          <Text style={{ padding: spacing, backgroundColor: '#f80' }}>First</Text>
-          <Text style={{ padding: spacing, backgroundColor: '#0af' }}>Second</Text>
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        {spacingExample('None', globalTokens.sizeNone)}
-        {spacingExample('size20', globalTokens.size20)}
-        {spacingExample('size40', globalTokens.size40)}
-        {spacingExample('size60', globalTokens.size60)}
-        {spacingExample('size80', globalTokens.size80)}
-        {spacingExample('size100', globalTokens.size100)}
-        {spacingExample('size120', globalTokens.size120)}
-        {spacingExample('size160', globalTokens.size160)}
-        {spacingExample('size200', globalTokens.size200)}
-        {spacingExample('size240', globalTokens.size240)}
-        {spacingExample('size280', globalTokens.size280)}
-        {spacingExample('size320', globalTokens.size320)}
-        {spacingExample('size360', globalTokens.size360)}
-        {spacingExample('size400', globalTokens.size400)}
-        {spacingExample('size480', globalTokens.size480)}
-        {spacingExample('size560', globalTokens.size560)}
-      </Stack>
-    </View>
-  );
-};
-
-export const SpacingTokensTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Production',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description = 'This showcases the different spacing tokens available in Fluent UI.';
-
-  const spacingSections: TestSection[] = [
-    {
-      name: 'Basic Usage',
-      testID: SPACING_TESTPAGE,
-      component: BasicUsage,
-    },
-  ];
-
-  return <Test name="Spacing Tokens Test" description={description} sections={spacingSections} status={status} />;
-};

package/src/TestComponents/Spacing/index.ts

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

package/src/TestComponents/Spinner/SpinnerE2ETest.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-import { SPINNER_TEST_COMPONENT } from '@fluentui-react-native/e2e-testing';
-import { Spinner } from '@fluentui-react-native/spinner';
-import { Stack } from '@fluentui-react-native/stack';
-
-import { stackStyle } from '../Common/styles';
-import { testProps } from '../Common/TestProps';
-
-export const E2ETestingSpinner: React.FunctionComponent<Record<string, never>> = () => {
-  return (
-    <Stack style={stackStyle}>
-      <Spinner
-        size="large"
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(SPINNER_TEST_COMPONENT)}
-      />
-    </Stack>
-  );
-};

package/src/TestComponents/Spinner/SpinnerTest.tsx

@@ -1,111 +0,0 @@
-import * as React from 'react';
-import { View, Switch } from 'react-native';
-
-import { SPINNER_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import type { SpinnerStatus } from '@fluentui-react-native/spinner';
-import { Spinner } from '@fluentui-react-native/spinner';
-import { Stack } from '@fluentui-react-native/stack';
-import { Text, TextV1 } from '@fluentui-react-native/text';
-
-import { E2ETestingSpinner } from './SpinnerE2ETest';
-import { stackStyle, commonTestStyles as commonStyles, commonTestStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const BasicSpinnerTest: React.FunctionComponent = () => {
-  const [status, setStatus] = React.useState<SpinnerStatus>('active');
-  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
-
-  return (
-    <Stack style={stackStyle}>
-      <View style={commonStyles.root}>
-        <View style={commonStyles.settings}>
-          <View style={commonStyles.switch}>
-            <Text>Animating</Text>
-            <Switch
-              value={status === 'active'}
-              onValueChange={(value) => {
-                value ? setStatus('active') : setStatus('inactive');
-              }}
-            />
-          </View>
-          <View style={commonStyles.switch}>
-            <Text>HidesWhenStopped</Text>
-            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
-          </View>
-        </View>
-        <Spinner status={status} hidesWhenStopped={hidesWhenStopped} />
-      </View>
-    </Stack>
-  );
-};
-
-const CustomisedSpinner = Spinner.customize({
-  trackColor: 'red',
-  size: 'medium',
-});
-
-const SpinnerSizeTest: React.FunctionComponent = () => {
-  const memoizedStyles = React.useMemo(() => ({ ...commonTestStyles.androidContainer, height: 250 }), []);
-  return (
-    <Stack style={stackStyle}>
-      <View style={memoizedStyles}>
-        <View>
-          <TextV1>xx-small</TextV1>
-          <Spinner size="xx-small" />
-        </View>
-        <View>
-          <TextV1>x-small</TextV1>
-          <Spinner size="x-small" />
-        </View>
-        <View>
-          <TextV1>medium</TextV1>
-          <Spinner size="medium" />
-        </View>
-        <View>
-          <TextV1>large</TextV1>
-          <Spinner size="large" />
-        </View>
-        <View>
-          <TextV1>x-large</TextV1>
-          <Spinner size="x-large" />
-        </View>
-      </View>
-    </Stack>
-  );
-};
-
-const spinnerSections: TestSection[] = [
-  {
-    name: 'Basic Spinner',
-    testID: SPINNER_TESTPAGE,
-    component: BasicSpinnerTest,
-  },
-  {
-    name: 'Spinner Size Test',
-    component: SpinnerSizeTest,
-  },
-  {
-    name: 'Customized Spinner Test',
-    component: () => <CustomisedSpinner />,
-  },
-  {
-    name: 'Spinner for E2E Testing',
-    component: () => <E2ETestingSpinner />,
-  },
-];
-
-export const SpinnerTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description =
-    'Spinner is a visual representation that data is being loaded. It is implemented with a View wrapping an Animated SVG. The View is to ensure that AccessibilityRole works. AccessibilityRole currently does not work on SVGs.';
-
-  return <Test name="Spinner Test" description={description} sections={spinnerSections} status={status}></Test>;
-};

package/src/TestComponents/Spinner/SpinnerTest.win32.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import { View /*Switch */ } from 'react-native';
-
-//import type { SpinnerStatus } from '@fluentui-react-native/spinner';
-import { SPINNER_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Spinner } from '@fluentui-react-native/spinner';
-import { Stack } from '@fluentui-react-native/stack';
-import { TextV1 as Text } from '@fluentui-react-native/text';
-
-import { E2ETestingSpinner } from './SpinnerE2ETest';
-import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const BasicSpinnerTest: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <View style={commonStyles.root}>
-        <View style={commonStyles.settings}></View>
-        <Spinner />
-      </View>
-    </Stack>
-  );
-};
-
-const SpinnerSizeTest: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <View>
-        <View>
-          <Text>tiny</Text>
-          <Spinner size="tiny" />
-        </View>
-        <View>
-          <Text>x-small</Text>
-          <Spinner size="x-small" />
-        </View>
-        <View>
-          <Text>small</Text>
-          <Spinner size="small" />
-        </View>
-        <View>
-          <Text>medium</Text>
-          <Spinner size="medium" />
-        </View>
-        <View>
-          <Text>large</Text>
-          <Spinner size="large" />
-        </View>
-        <View>
-          <Text>x-large</Text>
-          <Spinner size="x-large" />
-        </View>
-        <View>
-          <Text>huge</Text>
-          <Spinner size="huge" />
-        </View>
-      </View>
-    </Stack>
-  );
-};
-
-const spinnerSections: TestSection[] = [
-  {
-    name: 'Basic Spinner Test',
-    testID: SPINNER_TESTPAGE,
-    component: BasicSpinnerTest,
-  },
-  {
-    name: 'Spinner Size Test',
-    component: SpinnerSizeTest,
-  },
-  {
-    name: 'Spinner for E2E Testing',
-    component: () => <E2ETestingSpinner />,
-  },
-];
-
-export const SpinnerTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Experimental',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Beta',
-    macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
-  };
-
-  const description =
-    'Spinner is a visual representation that data is being loaded. It is implemented with a View wrapping an Animated SVG. The View is to ensure that AccessibilityRole works. AccessibilityRole currently does not work on SVGs.';
-
-  return <Test name="Spinner Test" description={description} sections={spinnerSections} status={status}></Test>;
-};