@fluentui-react-native/tester-core 0.1.1

package/src/TestComponents/Svg/SvgTest.tsx

@@ -0,0 +1,368 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { StyleSheet, Switch, Text, TextInput, View } from 'react-native';
+
+import { ButtonV1 as Button, ToggleButton } from '@fluentui/react-native';
+import { Separator } from '@fluentui/react-native';
+import { SVG_TESTPAGE } from '@fluentui-react-native/e2e-testing';
+import { TextV1 } from '@fluentui-react-native/text';
+import {
+  Circle,
+  Defs,
+  G,
+  Line,
+  Path,
+  Polygon,
+  LinearGradient,
+  RadialGradient,
+  Rect,
+  Stop,
+  Svg,
+  SvgUri,
+  SvgXml,
+  Use,
+  parse,
+} from 'react-native-svg';
+
+import TestSvg from '../../../assets/accessible-icon-brands.svg';
+import { Test } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+
+const styles = StyleSheet.create({
+  svg: {
+    backgroundColor: 'green',
+    color: 'purple',
+  },
+  textInlineSvg: {
+    textTransform: 'uppercase',
+  },
+});
+
+const RectTest: React.FunctionComponent = () => {
+  const [useColorA, setUseColorA] = React.useState(false);
+  const colorA = 'red';
+  const colorB = 'green';
+
+  return (
+    <React.Fragment>
+      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+        <Switch
+          value={useColorA}
+          onValueChange={(value) => {
+            setUseColorA(value);
+          }}
+        />
+        <Text>Change Color</Text>
+      </View>
+      <Separator />
+      <Svg width="50" height="50">
+        <Rect x="10" y="10" width="20" height="20" fill={useColorA ? colorA : colorB} stroke="black" />
+      </Svg>
+    </React.Fragment>
+  );
+};
+
+const RichTextInlineSvgTest: React.FunctionComponent = () => {
+  const [showInline, setShowInline] = React.useState(false);
+  const [isGreen, setIsGreen] = React.useState(true);
+
+  const toggleShowInline = React.useCallback(() => {
+    setShowInline(!showInline);
+  }, [showInline]);
+  const toggleRectFill = React.useCallback(() => {
+    setIsGreen(!isGreen);
+  }, [isGreen]);
+
+  return (
+    <>
+      <TextV1 style={styles.textInlineSvg} font="base" weight="medium" truncate>
+        Left [
+        {showInline ? (
+          <Svg width="50" height="50" viewBox="0 0 50 50">
+            <Rect width="50" height="50" fill="red" />
+            <Rect x="20" width="20" height="20" fill={isGreen ? 'green' : 'blue'} />
+          </Svg>
+        ) : (
+          'Svg will go here'
+        )}
+        ] Right
+      </TextV1>
+      <Button onClick={toggleShowInline}>{showInline ? 'Remove inline svg' : 'Insert inline svg'}</Button>
+      <Button onClick={toggleRectFill}>{isGreen ? 'Change to Blue' : 'Change to Green'}</Button>
+    </>
+  );
+};
+
+const CircleTest: React.FunctionComponent = () => {
+  return (
+    <Svg width="50" height="50" accessible={true} accessibilityLabel="SVG Circle Test" accessibilityRole="image">
+      <Circle cx="25" cy="25" r="20" fill="red" stroke="black" />
+    </Svg>
+  );
+};
+
+const LineTest: React.FunctionComponent = () => {
+  return (
+    <Svg width="50" height="50" accessible={true} accessibilityLabel="SVG Line Test" accessibilityRole="image">
+      <Line x1="10" y1="10" x2="20" y2="20" fill="red" stroke="black" />
+    </Svg>
+  );
+};
+
+const PathTest: React.FunctionComponent = () => {
+  return (
+    <Svg width="100" height="100" accessible={true} accessibilityLabel="SVG Path Test" accessibilityRole="image">
+      <Path d="M 0 0 A 10 10 0 0,1 0 100" fill="magenta" stroke="purple" id="path" />
+    </Svg>
+  );
+};
+
+const PolygonTest: React.FunctionComponent = () => {
+  return (
+    <Svg height="100" width="100" accessible={true} accessibilityLabel="SVG Polygon Test" accessibilityRole="image">
+      <Polygon points="40,5 70,80 25,95" fill="lime" stroke="purple" strokeWidth="1" />
+    </Svg>
+  );
+};
+
+const LinearGradientTest: React.FunctionComponent = () => {
+  return (
+    <Svg
+      height="100"
+      width="100"
+      style={{ backgroundColor: 'black' }}
+      viewBox="0 0 10 10"
+      color="yellow"
+      accessible={true}
+      accessibilityLabel="SVG Linear Gradient Test"
+      accessibilityRole="image"
+    >
+      <Defs>
+        <LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
+          <Stop offset="0" stopColor="green" stopOpacity="1" />
+          <Stop offset="1" stopColor="black" stopOpacity="1" />
+        </LinearGradient>
+      </Defs>
+      <Line x1="0" y1="0" x2="10" y2="10" fill="red" stroke="url(#grad)" strokeWidth="5" />
+    </Svg>
+  );
+};
+
+const RadialGradientTest: React.FunctionComponent = () => {
+  return (
+    <Svg
+      height="100"
+      width="100"
+      style={{ backgroundColor: 'black' }}
+      viewBox="0 0 10 10"
+      color="yellow"
+      accessible={true}
+      accessibilityLabel="SVG Radial Gradient Test"
+      accessibilityRole="image"
+    >
+      <Defs>
+        <RadialGradient id="grad2">
+          <Stop offset="0" stopColor="blue" />
+          <Stop offset="1" stopColor="red" />
+        </RadialGradient>
+      </Defs>
+      <Line x1="0" y1="0" x2="9" y2="9" stroke="url(#grad2)" strokeWidth="5" />
+    </Svg>
+  );
+};
+
+const RadialGradientTransformTest: React.FunctionComponent = () => {
+  return (
+    <Svg
+      width={256}
+      height={256}
+      viewBox="0 0 48 48"
+      fill="none"
+      accessible={true}
+      accessibilityLabel="SVG Radial Gradient Transform Test"
+      accessibilityRole="image"
+    >
+      <Rect width={48} height={48} fill="url(#paint0_radial_1533_187044)" />
+      <Rect x={10} y={10} width={10} height={10} fill="red" />
+      <Defs>
+        <RadialGradient
+          id="paint0_radial_1533_187044"
+          cx={0}
+          cy={0}
+          r={20}
+          gradientUnits="userSpaceOnUse"
+          gradientTransform="translate(22 11)"
+        >
+          <Stop offset={0.0598494} stopColor="#FF0000" />
+          <Stop offset={1} stopColor="#00FF00" />
+        </RadialGradient>
+      </Defs>
+    </Svg>
+  );
+};
+
+const RectCircleTest: React.FunctionComponent = () => {
+  return (
+    <Svg height="200" width="200" accessible={true} accessibilityLabel="SVG Rect and Circle Test" accessibilityRole="image">
+      <Defs>
+        <G id="shape">
+          <G>
+            <Rect x="120" y="120" width="20" height="50" fill="red" />
+            <Circle cx="100" cy="100" r="20" fill="blue" stroke="black" />
+          </G>
+        </G>
+      </Defs>
+      <Use href="#shape" x="20" y="0" />
+      <Use href="#shape" x="170" y="0" />
+    </Svg>
+  );
+};
+
+const BundledSvgTest: React.FunctionComponent = () => {
+  return (
+    <TestSvg width={200} height={200} color="red" accessible={true} accessibilityLabel="SVG Bundled svg Test" accessibilityRole="image" />
+  );
+};
+
+const RemoteSvgTest: React.FunctionComponent = () => {
+  return (
+    <View>
+      <SvgUri
+        style={styles.svg}
+        viewBox="0 0 600 600"
+        width="100"
+        height="100"
+        uri="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg"
+        accessible={true}
+        accessibilityLabel="SVG Uri Test"
+        accessibilityRole="image"
+      />
+    </View>
+  );
+};
+
+const CustomSvgInputTest: React.FunctionComponent = () => {
+  const defaultxml = `
+  <svg width="256" height="256" viewBox="0 0 48 48">
+  <rect width="48" height="48" fill="red"/>
+  </svg>
+`;
+
+  const textInputStyle = { height: 256, width: 1024, borderColor: 'gray', borderWidth: 1, fontSize: 16 };
+  const [inputText, setInputText] = useState<string>(defaultxml);
+  const [svgText, setSvgText] = useState<string>(defaultxml);
+  const [dataText, setDataText] = useState<string>('click draw to see parsed data');
+  const [showParse, setShowParsed] = useState<boolean>(false);
+
+  const handleChangeText = React.useCallback(
+    (text: string) => {
+      setInputText(text);
+    },
+    [setInputText],
+  );
+
+  const handleDrawOnClick = React.useCallback(() => {
+    const parsed = parse(inputText);
+    if (parsed !== null) {
+      setSvgText(inputText);
+      setDataText(JSON.stringify(parsed));
+    }
+  }, [inputText, setSvgText, setDataText]);
+
+  const handleShowParsed = React.useCallback(() => {
+    setShowParsed(!showParse);
+  }, [showParse, setShowParsed]);
+
+  return (
+    <View>
+      <Text>
+        Paste an svg in here and click Draw to try it out. The way it uses rnsvg&apos;s parse function to attempt to validate svg may cause
+        asserts and crashes if the svg is invalid. Looking for another solution for this, but this is still useful in its current state.
+      </Text>
+      <TextInput
+        multiline={true}
+        accessibilityLabel="Custom svg text input"
+        value={inputText}
+        style={textInputStyle}
+        onChangeText={handleChangeText}
+      />
+      <View style={{ flexDirection: 'row' }}>
+        <Button onClick={handleDrawOnClick}>Draw</Button>
+        <ToggleButton onClick={handleShowParsed}>Toggle Parsed data</ToggleButton>
+      </View>
+      <Separator />
+      {showParse && <Text>{dataText}</Text>}
+      <SvgXml width="256" height="256" xml={svgText} accessible={true} accessibilityLabel="Custom Svg Test" accessibilityRole="image" />
+    </View>
+  );
+};
+
+const svgSections: TestSection[] = [
+  {
+    name: 'Custom Svg Input',
+    component: CustomSvgInputTest,
+    testID: SVG_TESTPAGE,
+  },
+  {
+    name: 'Rect',
+    component: RectTest,
+  },
+  {
+    name: 'Circle',
+    component: CircleTest,
+  },
+  {
+    name: 'RichTextInlineSvg',
+    component: RichTextInlineSvgTest,
+  },
+  {
+    name: 'Line',
+    component: LineTest,
+  },
+  {
+    name: 'Path',
+    component: PathTest,
+  },
+  {
+    name: 'Polygon',
+    component: PolygonTest,
+  },
+  {
+    name: 'Linear Gradient',
+    component: LinearGradientTest,
+  },
+  {
+    name: 'Radial Gradient',
+    component: RadialGradientTest,
+  },
+  {
+    name: 'Radial GradientTransform',
+    component: RadialGradientTransformTest,
+  },
+  {
+    name: 'Rect and Circle via Defs and Use',
+    component: RectCircleTest,
+  },
+  {
+    name: 'Bundled Svg',
+    component: BundledSvgTest,
+  },
+  {
+    name: 'Remotely Retrieved Svgs',
+    component: RemoteSvgTest,
+  },
+];
+
+export const SvgTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Production',
+    uwpStatus: 'Production',
+    iosStatus: 'Production',
+    macosStatus: 'Production',
+    androidStatus: 'Production',
+  };
+
+  const description = 'No description.';
+
+  return <Test name="Svg Test" description={description} sections={svgSections} status={status} />;
+};

package/src/TestComponents/Svg/index.ts

@@ -0,0 +1,2 @@
+export * from './SvgTest';
+export * from './RNSVGIcons';

package/src/TestComponents/Svg/readme.md

@@ -0,0 +1,132 @@
+# Using SVGs in FluentUI React Native
+
+## Setup
+
+### Dependencies
+
+First you'll need to add the [react-native-svg](https://github.com/react-native-svg/react-native-svg) package.
+
+`yarn add react-native-svg`
+
+If you want to only use remotely hosted svgs via uri or you are supplying the svg as an xml string that is the only dependency you need to install.
+
+Additional dependencies will depend on which bundler your project uses.
+
+### Bundler configuration - **Metro**
+
+If bundling svgs and reading svg files directly from your bundle is also a requirement then you'll have to add [react-native-svg-transformer](https://github.com/kristerkari/react-native-svg-transformer) as a dev dependency as well.
+
+`yarn add -D react-native-svg-transformer`
+
+react-native-svg-transformer is a babel plugin transformer that takes your svg files and converts them into react-native calls at bundle time so it doesn't have to be done at run-time.
+
+In your metro.config.js you'll need to replace the default configuration or merge your custom configuration with this:
+
+```
+const { getDefaultConfig } = require('metro-config');
+
+module.exports = (async () => {
+  const {
+    resolver: { sourceExts, assetExts },
+  } = await getDefaultConfig();
+  return {
+    transformer: {
+      babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    },
+    resolver: {
+      assetExts: assetExts.filter(ext => ext !== 'svg'),
+      sourceExts: [...sourceExts, 'svg'],
+    },
+  };
+})();
+```
+
+### Bundler configuration - **Haul**
+
+If bundling svgs and reading svg files directly from your bundle is also a requirement then you'll have to add [react-native-svg-loader](https://github.com/unimonkiez/react-native-svg-loader) as a dev dependency as well.
+
+`yarn add -D react-native-svg-loader`
+
+[react-native-svg-loader](https://github.com/unimonkiez/react-native-svg-loader) is a webpack loader that takes your svg files and converts them into react-native calls at bundle time so it doesn't have to be done at run-time.
+
+You'll have to add the following rule to your haul configuration for the svg extension to be processed by this loader. Please see the official [Haul configuration](https://callstack.github.io/haul/docs/configuration.html) docs for specific details.
+
+```
+test: /\.svg$/,
+use: [
+  {
+    loader: 'react-native-svg-loader',
+  },
+]
+```
+
+### Typescript configuration for the .svg file extension
+
+To allow Typescript to import files with the .svg extension, add a declarations.d.ts file in a @types/<pkg name> directory under the source root of your project with the following:
+
+```
+declare module "*.svg" {
+  import { SvgProps } from "react-native-svg";
+  const content: React.FC<SvgProps>;
+  export default content;
+}
+```
+
+Now you should be able to do things like
+
+```
+import TestSvg from './assets/test.svg';
+```
+
+## Using SVG elements
+
+We have implemented native support for [react-native-svg](https://github.com/react-native-svg/react-native-svg) so most of the documentation there should apply.
+
+There is support for displaying svgs from these kinds of sources:
+
+- Remotely hosted and retrieved via URI
+- .svg files bundled in your js bundle
+- Provided as xml in a string
+- Constructed inline using svg primitives within a Svg block
+
+There are examples of usage of each type in apps\fluent-tester\src\FluentTester\TestComponents\Svg\SvgTest.tsx in the [fluentui-react-native](https://github.com/microsoft/fluentui-react-native) repo.
+
+Here are a couple of the simplest ones:
+
+### Bundled svg
+
+```
+import TestSvg from './Assets/accessible-icon-brands.svg';
+const bundledSvg: React.FunctionComponent = () => {
+  return (
+    <TestSvg width={200} height={200} color="red" />
+  );
+}
+```
+
+### Remote svg via uri
+
+```
+const remoteSvg: React.FunctionComponent = () => {
+  return (
+    <View>
+      <SvgCssUri
+        style={styles.svg}
+        viewBox="0 0 200 200"
+        width="100"
+        height="100"
+        uri="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg"
+      />
+      <SvgCssUri
+        x="50"
+        y="50"
+        viewBox="0 0 500 500"
+        style={styles.svg}
+        width="100"
+        height="100"
+        uri="http://10.122.222.112:8080/accessible-icon-brands.svg"
+      />
+    </View>
+  );
+}
+```