react-native-ui-lib 7.41.0-snapshot.6877 → 7.41.0-snapshot.6884

package/package.json

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

package/scripts/docs/buildDocsCommon.js

@@ -7,6 +7,7 @@ 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 = [
@@ -27,7 +28,8 @@ 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)
+  'dev', // development category for components we don't want to render in our docs (used in test.api.json),
+  'composite'
 ];
 
 function buildDocs(apiFolders, componentsPreProcess) {
@@ -95,6 +97,10 @@ 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.js

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

package/src/components/timeline/Point.js

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

package/src/components/timeline/index.js

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

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

@@ -23,7 +23,6 @@ export type LineProps = {
     /** to mark as entry point */
     entry?: boolean;
     width?: number;
-    testID?: string;
 };
 export type PointProps = {
     state?: StateTypes | `${StateTypes}`;
@@ -36,7 +35,6 @@ export type PointProps = {
     labelColor?: string;
     /** to align point to this view's center */
     anchorRef?: React.MutableRefObject<undefined>;
-    testID?: string;
 };
 export type Layout = {
     x: number;