@fluentui-react-native/tester 0.170.50 → 0.170.51

package/src/TestComponents/Theme/ThemeTest.android.tsx

@@ -1,141 +0,0 @@
-import * as React from 'react';
-import type { ColorValue, ViewStyle } from 'react-native';
-import { Text as TextRN, View } from 'react-native';
-import { StyleSheet } from 'react-native';
-
-import { Text } from '@fluentui/react-native';
-import { THEME_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { useFluentTheme } from '@fluentui-react-native/framework';
-import type { Theme } from '@fluentui-react-native/theme-types';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-
-import { commonTestStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const getThemedStyles = themedStyleSheet((theme: Theme) => {
-  return {
-    swatch: {
-      color: theme.colors.neutralForeground1,
-    },
-    rootView: {
-      backgroundColor: theme.colors.brandBackground,
-    },
-  };
-});
-
-const styles = StyleSheet.create({
-  swatchItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 5,
-  },
-  panel: {
-    ...commonTestStyles.view,
-    borderWidth: 2,
-    padding: 12,
-    margin: 8,
-  },
-  pickerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  stackStyle: {
-    borderWidth: 2,
-    padding: 12,
-    margin: 8,
-  },
-});
-
-const Panel: React.FunctionComponent = () => {
-  const theme = useFluentTheme();
-  const themedStyles = getThemedStyles(theme);
-
-  return (
-    <View>
-      <Text style={{ color: theme.colors.buttonBackgroundChecked }}>buttonBackgroundChecked styled text</Text>
-
-      <Text style={{ color: theme.colors.neutralForeground1 }}>neutralForeground1 styled text</Text>
-
-      <Text style={{ color: theme.colors.hostColorPink }}>hostColorPink styled text</Text>
-
-      <Text style={{ color: theme.colors.hostColorButtonBackground }}>hostColorButtonBackground styled text</Text>
-
-      <Text style={{ color: theme.colors.hostColorBrandText }}>hostColorBrandText styled text</Text>
-
-      <TextRN style={{ color: theme.colors.yellowBrandColor }}>yellowBrandColor styled text</TextRN>
-
-      <TextRN style={themedStyles.swatch}>Styled RN Text</TextRN>
-    </View>
-  );
-};
-
-const getSwatchColorStyle = (name: string, color: ColorValue): ViewStyle => {
-  styles[name] = styles[name] || { backgroundColor: color };
-  return styles[name];
-};
-
-type SemanticColorProps = { color: ColorValue; name: string };
-const SemanticColor: React.FunctionComponent<SemanticColorProps> = (p: SemanticColorProps) => {
-  const themedStyles = getThemedStyles(useFluentTheme());
-  return (
-    <View style={styles.swatchItem}>
-      <View style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]} />
-      <Text>{p.name}</Text>
-    </View>
-  );
-};
-
-const SwatchList: React.FunctionComponent = () => {
-  const theme = useFluentTheme();
-  const palette = theme.colors;
-
-  const aggregator = React.useCallback(
-    (key: string) => {
-      return { key: key + ' (' + (palette[key] as string) + ')', color: palette[key] };
-    },
-    [palette],
-  );
-
-  const flattenArray = React.useCallback(() => {
-    return Object.keys(palette).sort().map(aggregator);
-  }, [palette, aggregator]);
-
-  const paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
-  const renderSwatch = React.useCallback((item) => {
-    const { color, key } = item;
-    return <SemanticColor key={key} color={color} name={key} />;
-  }, []);
-  return (
-    <View style={commonTestStyles.view}>
-      <Text>getColorsAndroid(theme: ITheme).palette</Text>
-      <View style={styles.stackStyle}>{paletteAsArray.map((item) => renderSwatch(item))}</View>
-    </View>
-  );
-};
-const themeSections: TestSection[] = [
-  {
-    name: 'Component Examples',
-    testID: THEME_TESTPAGE,
-    component: Panel,
-  },
-  {
-    name: 'Theme.colors',
-    component: () => <SwatchList />,
-  },
-];
-
-export const ThemeTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Beta',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Experimental',
-    macosStatus: 'Experimental',
-    androidStatus: 'Beta',
-  };
-
-  const description =
-    'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
-
-  return <Test name="Theme Test" description={description} sections={themeSections} status={status} />;
-};

package/src/TestComponents/Theme/ThemeTest.tsx

@@ -1,133 +0,0 @@
-import * as React from 'react';
-import type { ViewStyle, ColorValue } from 'react-native';
-import { View, StyleSheet } from 'react-native';
-
-import { Button, PrimaryButton, Text, StealthButton } from '@fluentui/react-native';
-import { THEME_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-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 { commonTestStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const getThemedStyles = themedStyleSheet((theme: Theme) => {
-  return {
-    swatch: {
-      width: 80,
-      height: 20,
-      marginRight: 5,
-      borderWidth: 2,
-      borderColor: theme.colors.bodyText,
-    },
-  };
-});
-
-const styles = StyleSheet.create({
-  swatchItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginVertical: 5,
-  },
-  panel: {
-    ...commonTestStyles.view,
-    borderWidth: 2,
-    padding: 12,
-    margin: 8,
-  },
-  pickerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
-  stackStyle: {
-    borderWidth: 2,
-    padding: 12,
-    margin: 8,
-  },
-});
-
-const Panel: React.FunctionComponent = () => {
-  const [disabled, setDisabled] = React.useState(false);
-  const onClick = React.useCallback(() => setDisabled(!disabled), [disabled, setDisabled]);
-  return (
-    <View style={styles.panel}>
-      <PrimaryButton onClick={onClick} content="Primary Button" disabled={disabled} />
-      <Button onClick={onClick} content="Default Button" disabled={disabled} />
-      <StealthButton onClick={onClick} content="Stealth Button" disabled={disabled} />
-      <Text>This is a text element</Text>
-      <Button onClick={onClick} content="This button has longer text" disabled={disabled} />
-    </View>
-  );
-};
-
-const getSwatchColorStyle = (name: string, color: ColorValue): ViewStyle => {
-  styles[name] = styles[name] || { backgroundColor: color };
-  return styles[name];
-};
-
-type SemanticColorProps = { color: ColorValue; name: string };
-const SemanticColor: React.FunctionComponent<SemanticColorProps> = (p: SemanticColorProps) => {
-  const themedStyles = getThemedStyles(useTheme());
-  return (
-    <View style={styles.swatchItem}>
-      <View style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]} />
-      <Text>{p.name}</Text>
-    </View>
-  );
-};
-
-const SwatchList: React.FunctionComponent = () => {
-  const theme = useTheme();
-  const palette = theme.colors;
-
-  const aggregator = React.useCallback(
-    (key: string) => {
-      return { key: key + ' (' + (palette[key] as string) + ')', color: palette[key] };
-    },
-    [palette],
-  );
-
-  const flattenArray = React.useCallback(() => {
-    return Object.keys(palette).sort().map(aggregator);
-  }, [palette, aggregator]);
-
-  const paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
-  const renderSwatch = React.useCallback((item) => {
-    const { color, key } = item;
-    return <SemanticColor key={key} color={color} name={key} />;
-  }, []);
-  return (
-    <View style={commonTestStyles.view}>
-      <Text>getHostSettingsWin32(theme: ITheme).palette</Text>
-      <View style={styles.stackStyle}>{paletteAsArray.map((item) => renderSwatch(item))}</View>
-    </View>
-  );
-};
-
-const themeSections: TestSection[] = [
-  {
-    name: 'Component Examples',
-    testID: THEME_TESTPAGE,
-    component: Panel,
-  },
-  {
-    name: 'Theme.colors',
-    component: () => <SwatchList />,
-  },
-];
-
-export const ThemeTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Production',
-    uwpStatus: 'Beta',
-    iosStatus: 'Production',
-    macosStatus: 'Production',
-    androidStatus: 'Production',
-  };
-
-  const description =
-    'The entire color palette of the controls is themeable. We provide a set of sensible defaults, but you can override all colors individually.';
-
-  return <Test name="Theme Test" description={description} sections={themeSections} status={status} />;
-};

package/src/TestComponents/Theme/index.ts

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

package/src/TestComponents/Tooltip/TooltipDefault.tsx

@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { ButtonV1 } from '@fluentui-react-native/button';
-import { Tooltip } from '@fluentui-react-native/tooltip';
-
-export const TooltipDefault: React.FunctionComponent = () => {
-  const defaultContent = 'Tooltip shows relative to mouse cursor.';
-  return (
-    <View>
-      <Tooltip content={defaultContent}>
-        <ButtonV1 accessibilityDescription={defaultContent}>Default Tooltip</ButtonV1>
-      </Tooltip>
-    </View>
-  );
-};

package/src/TestComponents/Tooltip/TooltipPosition.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-import { ButtonV1 } from '@fluentui-react-native/button';
-import { Tooltip } from '@fluentui-react-native/tooltip';
-
-export const TooltipPosition: React.FunctionComponent = () => {
-  const topCenterRef = React.useRef<View>(null);
-
-  return (
-    <View>
-      {/* In Progress - Implementation for custom positioning and anchoring is not completed in the native module. */}
-      <Tooltip content="Test" positioning="topCenter" target={topCenterRef}>
-        <ButtonV1 componentRef={topCenterRef}>Target + TopCenter</ButtonV1>
-      </Tooltip>
-      <Tooltip content="Test" positioning="topCenter" target={'test'}>
-        <ButtonV1 nativeID={'test'}>Target + TopCenter</ButtonV1>
-      </Tooltip>
-      {/* Adding more tests as follow-up*/}
-    </View>
-  );
-};

package/src/TestComponents/Tooltip/TooltipTest.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-
-import { TOOLTIP_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { TooltipDefault } from './TooltipDefault';
-// import { TooltipPosition } from './TooltipPosition';
-import { Test } from '../Test';
-import type { TestSection, PlatformStatus } from '../Test';
-
-const tooltipSections: TestSection[] = [
-  {
-    name: 'Default',
-    testID: TOOLTIP_TESTPAGE,
-    component: TooltipDefault,
-  },
-  // In Progress - Implementation for custom positioning and anchoring is not completed in the native module.
-  // {
-  //   name: 'Target + Positioning',
-  //   component: TooltipPosition,
-  // },
-];
-
-export const TooltipTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Experimental',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Backlog',
-    macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
-  };
-
-  const description =
-    'A Tooltip component displays additional information about another component. Tooltip is not expected to handle interactive content.';
-
-  return <Test name="Tooltip Test" description={description} sections={tooltipSections} status={status} />;
-};

package/src/TestComponents/Tooltip/index.ts

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

package/src/TestComponents/VibrancyView/VibrancyViewTest.tsx

@@ -1,231 +0,0 @@
-import * as React from 'react';
-import { Alert, StyleSheet, View } from 'react-native';
-import type { ViewProps } from 'react-native';
-
-import { ButtonV1 as Button, Text } from '@fluentui/react-native';
-import { VIBRANCYVIEW_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-import { Stack } from '@fluentui-react-native/stack';
-import type { Material, BlendingMode, State } from '@fluentui-react-native/vibrancy-view';
-import { VibrancyView } from '@fluentui-react-native/vibrancy-view';
-
-import { MenuPicker } from '../Common/MenuPicker';
-import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const styles = StyleSheet.create({
-  row: {
-    flex: 1,
-    flexDirection: 'row',
-  },
-  box: {
-    width: 100,
-    height: 100,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  bigBox: {
-    width: 200,
-    height: 200,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  biggerBox: {
-    backgroundColor: 'yellow',
-    width: 300,
-    height: 300,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  Rectangle1: {
-    backgroundColor: 'yellow',
-    width: 300,
-    height: 300,
-  },
-  Rectangle2: {
-    position: 'absolute',
-    top: 50,
-    width: 400,
-    height: 200,
-  },
-  centeredBox: {
-    backgroundColor: 'green',
-    width: 100,
-    height: 100,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  borderProps: {
-    backgroundColor: 'blue',
-    borderColor: 'red',
-    borderWidth: 1,
-    borderRadius: 8,
-  },
-  rootWithSpacing: { ...commonStyles.root, gap: 8 },
-});
-
-const VibrancyViewDefault: React.FunctionComponent = () => {
-  return (
-    <Stack style={stackStyle}>
-      <View style={styles.rootWithSpacing}>
-        <Text>Vibrancy View with no props set</Text>
-        <VibrancyView style={styles.box} />
-      </View>
-    </Stack>
-  );
-};
-
-const VibrancyViewWithViewProps: React.FunctionComponent = () => {
-  const descriptionString = '<View> and <VibrancyView> with the backgroundColor, borderColor, borderWidth, borderRadius set';
-  const viewProps: ViewProps = React.useMemo(() => {
-    return {
-      focusable: true,
-      style: [styles.box, styles.borderProps],
-    };
-  }, []);
-  return (
-    <Stack style={stackStyle}>
-      <View style={styles.rootWithSpacing}>
-        <Text>{descriptionString}</Text>
-        <View style={styles.row}>
-          <View {...viewProps} />
-          <VibrancyView {...viewProps} />
-        </View>
-      </View>
-    </Stack>
-  );
-};
-
-const materialSelections: Material[] = [
-  'titlebar',
-  'selection',
-  'menu',
-  'popover',
-  'sidebar',
-  'headerview',
-  'sheet',
-  'windowbackground',
-  'hudWindow',
-  'fullScreenUI',
-  'toolTip',
-  'contentBackground',
-  'underWindowBackground',
-  'underPageBackground',
-];
-const materialsCollection = materialSelections.map((material) => {
-  return {
-    label: material,
-    value: material,
-  };
-});
-
-const blendingModeSelections: BlendingMode[] = ['withinWindow', 'behindWindow'];
-const blendingModeCollection = blendingModeSelections.map((material) => {
-  return {
-    label: material,
-    value: material,
-  };
-});
-
-const stateSelections: State[] = ['followsWindowActiveState', 'active', 'inactive'];
-const stateCollection = stateSelections.map((material) => {
-  return {
-    label: material,
-    value: material,
-  };
-});
-
-const VibrancyViewWithVibrancyViewProps: React.FunctionComponent = () => {
-  const [material, setMaterial] = React.useState<Material>(undefined);
-  const [blendingMode, setBlendingMode] = React.useState<BlendingMode>(undefined);
-  const [state, setState] = React.useState<State>(undefined);
-
-  const onMaterialChange = React.useCallback((material: Material) => {
-    setMaterial(material);
-  }, []);
-
-  const onBlendingModeChange = React.useCallback((blendingMode: BlendingMode) => {
-    setBlendingMode(blendingMode);
-  }, []);
-
-  const onStateChange = React.useCallback((state: State) => {
-    setState(state);
-  }, []);
-
-  return (
-    <Stack style={stackStyle}>
-      <View style={styles.Rectangle1}>
-        <VibrancyView material={material} blendingMode={blendingMode} state={state} style={styles.Rectangle2}>
-          <MenuPicker prompt="Material" selected={material || 'undefined'} onChange={onMaterialChange} collection={materialsCollection} />
-          <MenuPicker
-            prompt="Blending Mode"
-            selected={blendingMode || 'undefined'}
-            onChange={onBlendingModeChange}
-            collection={blendingModeCollection}
-          />
-          <MenuPicker prompt="State" selected={state || 'undefined'} onChange={onStateChange} collection={stateCollection} />
-        </VibrancyView>
-      </View>
-    </Stack>
-  );
-};
-
-const HitTestButton = (props: { title: string }) => {
-  const onClick = React.useCallback(
-    (_e) => {
-      Alert.alert(props.title);
-    },
-    [props],
-  );
-  return <Button onClick={onClick}>{props.title}</Button>;
-};
-
-const VibrancyViewHitTest: React.FunctionComponent = () => {
-  return (
-    <View style={commonStyles.root}>
-      <HitTestButton title={'Button 1'} />
-      <VibrancyView style={styles.biggerBox}>
-        <HitTestButton title={'Button 2'} />
-        <View style={styles.centeredBox}>
-          <HitTestButton title={'Button 3'} />
-        </View>
-        <HitTestButton title={'Button 4'} />
-      </VibrancyView>
-      <HitTestButton title={'Button 5'} />
-    </View>
-  );
-};
-
-const VibrancyViewSections: TestSection[] = [
-  {
-    name: 'VibrancyView Default',
-    testID: VIBRANCYVIEW_TESTPAGE,
-    component: VibrancyViewDefault,
-  },
-  {
-    name: 'VibrancyView with View props',
-    component: VibrancyViewWithViewProps,
-  },
-  {
-    name: 'VibrancyView with VibrancyView props',
-    component: VibrancyViewWithVibrancyViewProps,
-  },
-  {
-    name: 'VibrancyView Hit Test',
-    component: VibrancyViewHitTest,
-  },
-];
-
-export const VibrancyViewTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'N/A',
-    uwpStatus: 'N/A',
-    iosStatus: 'Backlog',
-    macosStatus: 'Beta',
-    androidStatus: 'N/A',
-  };
-
-  const description = 'VibrancyView is a native module that exposes NSVisualEffectView to React Native on macOS';
-
-  return <Test name="VibrancyView Test" description={description} sections={VibrancyViewSections} status={status}></Test>;
-};

package/src/TestComponents/VibrancyView/index.ts

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

package/src/TestComponents/index.ts

@@ -1,8 +0,0 @@
-import type * as React from 'react';
-
-export type TestDescription = {
-  name: string;
-  component: React.FunctionComponent;
-  testPageButton: string;
-  platforms: string[];
-};

package/src/index.ts

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