react-native-ui-lib 7.38.1 → 7.39.0

package/src/components/timeline/timeline.api.json

@@ -1,61 +1,349 @@
-{
-  "name": "Timeline",
-  "category": "lists",
-  "description": "A timeline item to render as part of a timeline list",
-  "extends": ["View"],
-  "extendsLink": ["https://reactnative.dev/docs/view"],
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TimelineScreen.tsx",
-  "images": [],
-  "props": [
-    {"name": "backgroundColor", "type": "string", "description": "Background color for the item"},
-    {
-      "name": "renderContent",
-      "type": "any",
-      "description": "Custom content to render right to the timeline indicator"
-    },
-    {
-      "name": "state",
-      "type": "current | next | error | success",
-      "description": "The state of the timeline. Will affect the color of the indication (use static 'states')",
-      "default": "current"
-    },
-    {
-      "name": "topLine",
-      "type": "LineProps",
-      "description": "The top line props"
-    },
-    {
-      "name": "bottomLine",
-      "type": "LineProps",
-      "description": "The bottom line props"
-    },
-    {
-      "name": "point",
-      "type": "PointProps",
-      "description": "The point props"
-    },
-    {
-      "name": "testID", "type": "string", "description": "The test id for e2e tests"
-    }
-  ],
-  "snippet": [
-    "<Timeline ",
-    "  renderContent={$1}",
-    "  state={Timeline.states.NEXT$2}/>",
-    "  topLine={{",
-    "    state: Timeline.states.ERROR",
-    "  }$3}",
-    "  bottomLine={{",
-    "    type: Timeline.lineTypes.DASHED,",
-    "    color: Colors.orange40",
-    "  }$4}",
-    "  point={{",
-    "    type: Timeline.pointTypes.OUTLINE,",
-    "    color: Colors.orange40,",
-    "    icon: Assets.icons.demo.camera,",
-    "    targetContainerRef: targetContainer,",
-    "    alignmentTargetRef: target",
-    "  }$5}",
-    "/>"
-    ]
-}
+{
+  "name": "Timeline",
+  "category": "lists",
+  "description": "A timeline item to render as part of a timeline list",
+  "extends": ["View"],
+  "extendsLink": ["https://reactnative.dev/docs/view"],
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TimelineScreen.tsx",
+  "images": [],
+  "props": [
+    {
+      "name": "topLine",
+      "type": "LineProps",
+      "description": "The top line props"
+    },
+    {
+      "name": "bottomLine",
+      "type": "LineProps",
+      "description": "The bottom line props"
+    },
+    {
+      "name": "point",
+      "type": "PointProps",
+      "description": "The point props"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "The test id for testing"
+    }
+  ],
+  "snippet": [
+    "<Timeline ",
+    "  topLine={{",
+    "    state: Timeline.states.ERROR",
+    "  }$1}",
+    "  bottomLine={{",
+    "    type: Timeline.lineTypes.DASHED,",
+    "    color: Colors.orange40",
+    "  }$2}",
+    "  point={{",
+    "    type: Timeline.pointTypes.OUTLINE,",
+    "    color: Colors.orange40,",
+    "    icon: Assets.icons.demo.camera,",
+    "    anchorRef: alignToTitle ? titleRef : undefined",
+    "  }$3}",
+    ">",
+    "    <View flex centerH paddingH-20>",
+    "      <Text text70 dark10 ref={titleRef}>",
+    "        {title}",
+    "      </Text>",
+    "      <Text dark40>",
+    "        {description}",
+    "      </Text>",
+    "    </View>",
+    "</Timeline>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "Timeline",
+      "description": "markdown:\nThe timeline displays a vertical list of events or steps.   \nIt provides the user with a sense of awareness around the progress and the remaining steps.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Log Timeline",
+                "description": "A log of past and future activities or events. The list starts with an empty state, and it keeps on updating and changing.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_usageExamples1.png"
+                  }
+                ]
+              },
+              {
+                "title": "Steps Timeline",
+                "description": "A list of suggested steps to take to achieve a certain goal. Users usually need to take action with these steps.The steps are usually decided in advance, meaning that the initial state is not empty.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_overview_usageExamples2.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Usage Examples",
+            "description": "The timeline displays a vertical list of events or steps. \nIt provides the user with a sense of awareness around the progress and the remaining steps.",
+            "layout": "horizontal"
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "",
+                "description": "markdown:\nThe Timeline consists of points and lines, each with different styles and states. These elements can be combined in various ways to suit different product goals.  \nPoints create visual breakpoints that make your timeline easier to read, they act as bullet points, representing each step or activity. The icons and colors can be customized.  \nLines can either match the state and color of the points or be styled differently or in neutral tokens to emphasize the points.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure.png"
+                  }
+                ]
+              },
+              {
+                "title": "Points aligned to center (default)",
+                "description": "The timeline points are aligned with the center of the element on the right.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_center.png"
+                  }
+                ]
+              },
+              {
+                "title": "Points aligned to anchor ref",
+                "description": "The Timeline can be configured to align its points to one of the elements on the right. In the example, the points are aligned with the titles in the cards.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_structure_anchorRef.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Structure"
+          },
+          {
+            "type": "table",
+            "columns": ["Property", "Preview"],
+            "items": [
+              {
+                "title": "Current",
+                "content": [
+                  {
+                    "props": {
+                      "state": "current",
+                      "point": {
+                        "type": {
+                          "type": "bullet"
+                        }
+                      },
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
+                  },
+                  {
+                    "props": {
+                      "point": {
+                        "type": {
+                          "type": "bullet",
+                          "color": "#116DFF"
+                        }
+                      }
+                    }
+                  }
+                ],
+                "description": "state: current"
+              },
+              {
+                "title": "Next",
+                "content": [
+                  {
+                    "props": {
+                      "state": "next",
+                      "point": {
+                        "type": {
+                          "type": "bullet"
+                        }
+                      },
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
+                  }
+                ],
+                "description": "state: next"
+              },
+              {
+                "title": "Error",
+                "content": [
+                  {
+                    "props": {
+                      "state": "error",
+                      "point": {
+                        "type": {
+                          "type": "bullet"
+                        }
+                      },
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
+                  }
+                ],
+                "description": "state: error"
+              },
+              {
+                "title": "Success",
+                "content": [
+                  {
+                    "props": {
+                      "state": "success",
+                      "point": {
+                        "type": {
+                          "type": "bullet"
+                        }
+                      },
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
+                  }
+                ],
+                "description": "state: success"
+              }
+            ],
+            "title": "States",
+            "name": ""
+          },
+          {
+            "type": "table",
+            "columns": ["Property", "Preview"],
+            "items": [
+              {
+                "title": "Bullet",
+                "description": "type: bullet"
+              },
+              {
+                "title": "Circle",
+                "description": "type: circle"
+              },
+              {
+                "title": "Outline",
+                "description": "type: outline"
+              }
+            ],
+            "title": "Point",
+            "name": "Point Types"
+          },
+          {
+            "type": "table",
+            "columns": ["Property", "Preview"],
+            "items": [
+              {
+                "title": "Text",
+                "content": [
+                  {
+                    "props": {
+                      "state": "current",
+                      "bottomLine": {
+                        "type": {
+                          "type": "solid"
+                        }
+                      }
+                    }
+                  }
+                ],
+                "description": "text: “1”"
+              },
+              {
+                "title": "Icon",
+                "content": [
+                  {
+                    "props": {
+                      "state": "current",
+                      "bottomLine": {
+                        "type": {
+                          "type": "dashed"
+                        }
+                      }
+                    }
+                  }
+                ],
+                "description": "icon: Assets.icons.general.checkmarkSmall"
+              },
+              {
+                "title": "Icon without background",
+                "description": "icon: Assets.icons.general.favorite, removeIconBackground: true"
+              }
+            ],
+            "name": "Point Accessories"
+          },
+          {
+            "type": "table",
+            "columns": ["Property", "Preview"],
+            "items": [
+              {
+                "title": "Solid",
+                "description": "type: solid"
+              },
+              {
+                "title": "Dashed",
+                "description": "type: dashed"
+              }
+            ],
+            "title": "Line",
+            "name": "Line Types"
+          },
+          {
+            "type": "table",
+            "columns": ["Property", "Preview"],
+            "items": [
+              {
+                "title": "Entry",
+                "description": "entry: true"
+              }
+            ],
+            "name": "Line Accessories"
+          },
+          {
+            "type": "section",
+            "title": "Orientation",
+            "description": "markdown:\nThe Timeline can be displayed in either ascending or descending order, depending on the context:  \n\n - **Ascending:** Numbers increase as you move forward.   \n - **Descending:** Numbers decrease as you move forward.",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=2325-449060&embed-host=share"
+              }
+            ]
+          },
+          {
+            "type": "section",
+            "title": "Spec",
+            "description": "markdown:\n**Key rules:**  \n- Maintain a minimum distance of S2 between the Timeline and the elements on the right. \n- Points can be aligned either to the top or the center of the elements on the right. \n- When points are center-aligned with the elements, set the line length to auto, with a minimum of 20px.",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Timeline/timeline_spec.png"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/src/incubator/slider/SliderPresenter.js

@@ -1,4 +1,5 @@
 import { interpolate } from 'react-native-reanimated';
+import { LogService } from "../../services";
 export function getOffsetForValue(value, span, minimumValue = 0, maximumValue = 1) {
   const range = maximumValue - minimumValue;
   const relativeValue = minimumValue - value;
@@ -43,15 +44,21 @@ export function validateValues(props) {
     initialMaximumValue
   } = props;
   if (minimumValue > maximumValue || useRange && initialMinimumValue && initialMaximumValue && initialMinimumValue > initialMaximumValue) {
-    console.error('Your passed values are invalid. Please check if minimum values are not higher than maximum values');
+    LogService.forwardError({
+      message: 'Your passed values are invalid. Please check if minimum values are not higher than maximum values'
+    });
   }
   if (value !== undefined && minimumValue && maximumValue && !inRange(value, minimumValue, maximumValue)) {
-    console.error(`Your passed value (${value}) is invalid. 
-      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`);
+    LogService.forwardError({
+      message: `Your passed value (${value}) is invalid. 
+      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`
+    });
   }
   if (useRange && initialMinimumValue && initialMaximumValue) {
     if (!inRange(initialMinimumValue, minimumValue, maximumValue) || !inRange(initialMaximumValue, minimumValue, maximumValue)) {
-      console.error('Your passed values are invalid. Please check that they are in range of the minimum and maximum values');
+      LogService.forwardError({
+        message: 'Your passed values are invalid. Please check that they are in range of the minimum and maximum values'
+      });
     }
   }
 }

package/src/incubator/toast/toast.api.json

@@ -68,5 +68,131 @@
     "  autoDismiss={5000$2}",
     "  onDismiss={onDismiss$3}",
     ">"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "Toast",
+      "description": "Toasts give quick feedback or updates without interrupting the user. They’re used for non-critical messages, like success notifications, and disappear on their own. Toasts can include one action, but it shouldn’t be “Dismiss” or “Close.”",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
+              }
+            ]
+          },
+          {
+            "type": "table",
+            "columns": ["Type of message", "Preview"],
+            "items": [
+              {
+                "title": "Generic",
+                "content": [
+                  {
+                    "props": {
+                      "visible": true,
+                      "message": "\"Mika Or\" was saved to contacts."
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Success"
+              },
+              {
+                "title": "Validation"
+              },
+              {
+                "title": "Offline Error"
+              }
+            ],
+            "title": "Types"
+          },
+          {
+            "type": "table",
+            "columns": ["Prop", "Preview"],
+            "items": [
+              {
+                "title": "None"
+              },
+              {
+                "title": "With action"
+              },
+              {
+                "title": "With loader"
+              }
+            ],
+            "title": "Accessories"
+          },
+          {
+            "type": "section",
+            "title": "Timing",
+            "description": "markdown:\nToast disappears automatically after 5-10 seconds. The **default** duration depends on text length: [word count / 2] = X secs to disappear  \nExamples: \n[15 words / 2] = 7.5 secs\n[2 words / 2] = 1, but 5 secs is minimum >> 5 secs  \nWhen using Toasts in your product, keep in mind that the default display time is preset but can be adjusted for messages that need more attention or reading time. However, the duration should never be less than 5 seconds."
+          },
+          {
+            "type": "section",
+            "layout": "horizontal",
+            "title": "Spec",
+            "description": "markdown:\n**Positioning**\nThe Toast appears at the bottom of the screen, while keeping a spacing of S4 from the bottom of the screen, or from the bottom bar.  \nThe Toast can be placed above CTA’s in order to keep the CTA available for the user.  \nToast can be dismissed manually by swiping it down.",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_spec.png"
+              }
+            ]
+          },
+          {
+            "type": "section",
+            "title": "Tablet Spec",
+            "description": "markdown:\nWhen displaying a Toast on a Tablet, the width of the component adjusts to the content.  \n- Min-width: 200px  \n- Max-width: 524px",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Toast/toast_tablet.png"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "title": "UX Guidelines",
+        "sections": [
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "",
+                "content": [
+                  {
+                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247566&embed-host=share"
+                  }
+                ]
+              },
+              {
+                "title": "",
+                "content": [
+                  {
+                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=4419-247643&embed-host=share"
+                  }
+                ]
+              }
+            ],
+            "title": "Do’s & Don’ts",
+            "description": "markdown:\n**Message Length**\nDo not display long messages in a Toast, keep the Toast message short and focused, yet informative.  \nFurther information regarding the phrasing of toast messages can be found in UX Writers - Toast Guidelines."
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/services/HapticService.js

@@ -1,4 +1,5 @@
 import { HapticFeedbackPackage } from "../optionalDependencies";
+import { LogService } from "./";
 const options = {
   enableVibrateFallback: false,
   ignoreAndroidSystemSettings: false
@@ -17,7 +18,7 @@ function triggerHaptic(hapticType, componentName) {
   if (HapticFeedbackPackage) {
     HapticFeedbackPackage.trigger(hapticType, options);
   } else {
-    console.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
+    LogService.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
   }
 }
 export default {

package/src/services/LogService.d.ts

@@ -1,12 +1,15 @@
 interface BILogger {
     log: (event: any) => void;
 }
-declare class LogService {
+declare class LogService<ErrorInfo extends {
+    message: string;
+}> {
     private biLogger;
     injectBILogger: (biLogger: BILogger) => void;
     logBI: (event: any) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
+    forwardError: (errorInfo: ErrorInfo) => void;
     deprecationWarn: ({ component, oldProp, newProp }: {
         component: string;
         oldProp: string;
@@ -26,5 +29,7 @@ declare class LogService {
         newComponent: string;
     }) => void;
 }
-declare const _default: LogService;
+declare const _default: LogService<{
+    message: string;
+}>;
 export default _default;

package/src/services/LogService.js

@@ -12,9 +12,14 @@ class LogService {
   };
   error = (message, ...optionalParams) => {
     if (__DEV__) {
+      // eslint-disable-next-line no-restricted-syntax
       console.error(message, ...optionalParams);
     }
   };
+  forwardError = errorInfo => {
+    // eslint-disable-next-line no-restricted-syntax
+    console.error(errorInfo.message);
+  };
   deprecationWarn = ({
     component,
     oldProp,