react-native-ui-lib 7.41.0-snapshot.6891 → 7.41.0-snapshot.6899

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.41.0-snapshot.6891",
+  "version": "7.41.0-snapshot.6899",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/scripts/docs/buildDocsCommon.js

@@ -7,7 +7,6 @@ const fs = require('fs');
 
 const COMPONENTS_DOCS_DIR = './docs/components';
 const SERVICES_DOCS_DIR = './docs/services';
-const COMPOSITE_DOCS_DIR = './docs/composite';
 const FOUNDATION_DOCS_DIR = './docs/foundation';
 
 const VALID_COMPONENTS_CATEGORIES = [
@@ -28,8 +27,7 @@ const VALID_COMPONENTS_CATEGORIES = [
   'infra',
   // non components categories
   'services',
-  'dev', // development category for components we don't want to render in our docs (used in test.api.json),
-  'composite'
+  'dev' // development category for components we don't want to render in our docs (used in test.api.json)
 ];
 
 function buildDocs(apiFolders, componentsPreProcess) {
@@ -97,10 +95,6 @@ function processComponents(components) {
 
     let dirPath;
     switch (component.category) {
-      case 'composite': {
-        dirPath = `${COMPOSITE_DOCS_DIR}`;
-        break;
-      }
       case 'services': {
         dirPath = `${SERVICES_DOCS_DIR}`;
         break;

package/src/components/timeline/Line.d.ts

@@ -4,6 +4,7 @@ import { LineProps } from './types';
 type LinePropsInternal = LineProps & {
     top?: boolean;
     style?: ViewStyle;
+    testID?: string;
 };
 declare const Line: React.MemoExoticComponent<(props: LinePropsInternal) => React.JSX.Element>;
 export default Line;

package/src/components/timeline/Line.js

@@ -12,7 +12,8 @@ const Line = React.memo(props => {
     entry,
     top,
     style,
-    width = LINE_WIDTH
+    width = LINE_WIDTH,
+    testID
   } = props;
   const solidLineStyle = useMemo(() => {
     return [style, styles.line, {
@@ -27,14 +28,14 @@ const Line = React.memo(props => {
     if (entry) {
       return <View style={[styles.entryPoint, {
         backgroundColor: color
-      }]} />;
+      }]} testID={`${testID}.entryPoint`} />;
     }
   };
   const renderLine = () => {
     if (type === LineTypes.DASHED) {
-      return <Dash vertical color={color} containerStyle={dashedLineStyle} />;
+      return <Dash vertical color={color} containerStyle={dashedLineStyle} testID={testID} />;
     }
-    return <View style={solidLineStyle} />;
+    return <View style={solidLineStyle} testID={testID} />;
   };
   return <>
       {top && renderStartPoint()}

package/src/components/timeline/Point.d.ts

@@ -3,6 +3,7 @@ import { LayoutChangeEvent } from 'react-native';
 import { PointProps } from './types';
 type PointPropsInternal = PointProps & {
     onLayout?: (event: LayoutChangeEvent) => void;
+    testID?: string;
 };
 declare const Point: (props: PointPropsInternal) => React.JSX.Element;
 export default Point;

package/src/components/timeline/Point.js

@@ -20,7 +20,8 @@ const Point = props => {
     label,
     type,
     color,
-    onLayout
+    onLayout,
+    testID
   } = props;
   const pointStyle = useMemo(() => {
     const hasOutline = type === PointTypes.OUTLINE;
@@ -55,14 +56,14 @@ const Point = props => {
     const tintColor = removeIconBackground ? Colors.$iconDefault : Colors.$iconDefaultLight;
     const iconSize = removeIconBackground ? undefined : ICON_SIZE;
     if (icon) {
-      return <Icon tintColor={tintColor} {...iconProps} size={iconSize} source={icon} />;
+      return <Icon testID={`${testID}.icon`} tintColor={tintColor} {...iconProps} size={iconSize} source={icon} />;
     } else if (label) {
-      return <Text recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
+      return <Text testID={`${testID}.label`} recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
           {label}
         </Text>;
     }
   };
-  return <View center style={pointStyle} onLayout={onLayout}>
+  return <View center style={pointStyle} onLayout={onLayout} testID={testID}>
       {renderPointContent()}
     </View>;
 };

package/src/components/timeline/index.js

@@ -15,7 +15,8 @@ const Timeline = props => {
     topLine,
     bottomLine,
     point,
-    children
+    children,
+    testID
   } = themeProps;
   const [anchorMeasurements, setAnchorMeasurements] = useState();
   const [contentContainerMeasurements, setContentContainerMeasurements] = useState();
@@ -107,17 +108,17 @@ const Timeline = props => {
     });
   }, []);
   const renderTopLine = () => {
-    return <Line {...topLine} top style={topLineStyle} color={topLine ? topLine?.color || getStateColor(topLine?.state) : undefined} />;
+    return <Line testID={`${testID}.topLine`} {...topLine} top style={topLineStyle} color={topLine ? topLine?.color || getStateColor(topLine?.state) : undefined} />;
   };
   const renderBottomLine = () => {
     if (bottomLine) {
-      return <Line {...bottomLine} style={styles.bottomLine} color={bottomLine?.color || getStateColor(bottomLine?.state)} />;
+      return <Line testID={`${testID}.bottomLine`} {...bottomLine} style={styles.bottomLine} color={bottomLine?.color || getStateColor(bottomLine?.state)} />;
     }
   };
-  return <View row style={containerStyle}>
+  return <View row style={containerStyle} testID={testID}>
       <View style={styles.timelineContainer}>
         {renderTopLine()}
-        <Point {...point} onLayout={onPointLayout} color={point?.color || getStateColor(point?.state)} />
+        <Point {...point} onLayout={onPointLayout} color={point?.color || getStateColor(point?.state)} testID={`${testID}.point`} />
         {renderBottomLine()}
       </View>
       <View style={styles.contentContainer} onLayout={onContentContainerLayout} ref={contentContainerRef}>

package/src/components/timeline/line.driver.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const LineDriver: (props: ComponentProps) => {
+    getLine: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        isEntryPointExists: () => boolean;
+        getEntryPointStyle: () => any;
+    };
+};

package/src/components/timeline/line.driver.js

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { ViewDriver } from "../view/View.driver.new";
+export const LineDriver = props => {
+  const lineDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}`
+  });
+  const entryPointDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.entryPoint`
+  });
+  const getLine = () => {
+    const exists = () => {
+      return lineDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(lineDriver.getElement().props.style);
+    };
+    const isEntryPointExists = () => {
+      return entryPointDriver.exists();
+    };
+    const getEntryPointStyle = () => {
+      return entryPointDriver.getStyle();
+    };
+    return {
+      exists,
+      getStyle,
+      isEntryPointExists,
+      getEntryPointStyle
+    };
+  };
+  return {
+    getLine
+  };
+};

package/src/components/timeline/point.driver.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const PointDriver: (props: ComponentProps) => {
+    getPoint: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        getContentStyle: () => any;
+    };
+};

package/src/components/timeline/point.driver.js

@@ -0,0 +1,55 @@
+import { StyleSheet } from 'react-native';
+import { TextDriver } from "../text/Text.driver.new";
+import { ImageDriver } from "../image/Image.driver.new";
+import { ViewDriver } from "../view/View.driver.new";
+export const PointDriver = props => {
+  const pointDriver = ViewDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}`
+  });
+  const labelDriver = TextDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.label`
+  });
+  const iconDriver = ImageDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.icon`
+  });
+  const getLabel = () => {
+    const exists = () => {
+      return labelDriver.exists();
+    };
+    return {
+      ...labelDriver,
+      exists
+    };
+  };
+  const getIcon = () => {
+    const exists = () => {
+      return iconDriver.exists();
+    };
+    return {
+      ...iconDriver,
+      exists
+    };
+  };
+  const getPoint = () => {
+    const exists = () => {
+      return pointDriver.exists();
+    };
+    const getStyle = () => {
+      return StyleSheet.flatten(pointDriver.getElement().props.style);
+    };
+    const getContentStyle = () => {
+      return getIcon().exists() ? StyleSheet.flatten(getIcon().getElement().props.style) : getLabel().exists() && StyleSheet.flatten(getLabel().getElement().props.style);
+    };
+    return {
+      exists,
+      getStyle,
+      getContentStyle
+    };
+  };
+  return {
+    getPoint
+  };
+};

package/src/components/timeline/timeline.driver.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const TimelineDriver: (props: ComponentProps) => {
+    getPoint: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        getContentStyle: () => any;
+    };
+    getTopLine: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        isEntryPointExists: () => boolean;
+        getEntryPointStyle: () => any;
+    };
+    getBottomLine: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        isEntryPointExists: () => boolean;
+        getEntryPointStyle: () => any;
+    };
+    getElement: () => import("react-test-renderer").ReactTestInstance;
+    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    exists: () => boolean;
+};

package/src/components/timeline/timeline.driver.js

@@ -0,0 +1,39 @@
+import { useComponentDriver } from "../../testkit/new/Component.driver";
+import { LineDriver } from "./line.driver";
+import { PointDriver } from "./point.driver";
+export const TimelineDriver = props => {
+  const driver = useComponentDriver(props);
+  const pointDriver = PointDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.point`
+  });
+  const topLineDriver = LineDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.topLine`
+  });
+  const bottomLineDriver = LineDriver({
+    renderTree: props.renderTree,
+    testID: `${props.testID}.bottomLine`
+  });
+  const getPoint = () => {
+    return {
+      ...pointDriver.getPoint()
+    };
+  };
+  const getTopLine = () => {
+    return {
+      ...topLineDriver.getLine()
+    };
+  };
+  const getBottomLine = () => {
+    return {
+      ...bottomLineDriver.getLine()
+    };
+  };
+  return {
+    ...driver,
+    getPoint,
+    getTopLine,
+    getBottomLine
+  };
+};