react-native-ui-lib 7.38.1 → 7.39.0

package/src/components/gridListItem/gridListItem.api.json

@@ -4,7 +4,11 @@
   "description": "A single grid view/list item component",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx",
   "props": [
-    {"name": "imageProps", "type": "ImageProps", "description": "Image props object for rendering an image item"},
+    {
+      "name": "imageProps",
+      "type": "ImageProps",
+      "description": "Image props object for rendering an image item"
+    },
     {
       "name": "containerProps",
       "type": "TouchableOpacityProps | ViewProps",
@@ -16,19 +20,71 @@
       "description": "Custom GridListItem to be rendered in the GridView",
       "required": true
     },
-    {"name": "itemSize", "type": "number | ImageSize", "description": "The item size"},
-    {"name": "title", "type": "string | React.ReactElement", "description": "Title content text"},
-    {"name": "titleTypography", "type": "string", "description": "Title content typography"},
-    {"name": "titleColor", "type": "string", "description": "Title content color"},
-    {"name": "titleLines", "type": "number", "description": "Title content number of lines"},
-    {"name": "subtitle", "type": "string | React.ReactElement", "description": "Subtitle content text"},
-    {"name": "subtitleTypography", "type": "string", "description": "Subtitle content typography"},
-    {"name": "subtitleColor", "type": "string", "description": "Subtitle content color"},
-    {"name": "subtitleLines", "type": "number", "description": "Subtitle content number of lines"},
-    {"name": "description", "type": "string | React.ReactElement", "description": "Description content text"},
-    {"name": "descriptionTypography", "type": "string", "description": "Description content typography"},
-    {"name": "descriptionColor", "type": "string", "description": "Description content color"},
-    {"name": "descriptionLines", "type": "number", "description": "Description content number of lines"},
+    {
+      "name": "itemSize",
+      "type": "number | ImageSize",
+      "description": "The item size"
+    },
+    {
+      "name": "title",
+      "type": "string | React.ReactElement",
+      "description": "Title content text"
+    },
+    {
+      "name": "titleTypography",
+      "type": "string",
+      "description": "Title content typography"
+    },
+    {
+      "name": "titleColor",
+      "type": "string",
+      "description": "Title content color"
+    },
+    {
+      "name": "titleLines",
+      "type": "number",
+      "description": "Title content number of lines"
+    },
+    {
+      "name": "subtitle",
+      "type": "string | React.ReactElement",
+      "description": "Subtitle content text"
+    },
+    {
+      "name": "subtitleTypography",
+      "type": "string",
+      "description": "Subtitle content typography"
+    },
+    {
+      "name": "subtitleColor",
+      "type": "string",
+      "description": "Subtitle content color"
+    },
+    {
+      "name": "subtitleLines",
+      "type": "number",
+      "description": "Subtitle content number of lines"
+    },
+    {
+      "name": "description",
+      "type": "string | React.ReactElement",
+      "description": "Description content text"
+    },
+    {
+      "name": "descriptionTypography",
+      "type": "string",
+      "description": "Description content typography"
+    },
+    {
+      "name": "descriptionColor",
+      "type": "string",
+      "description": "Description content color"
+    },
+    {
+      "name": "descriptionLines",
+      "type": "number",
+      "description": "Description content number of lines"
+    },
     {
       "name": "overlayText",
       "type": "boolean",
@@ -39,23 +95,273 @@
       "type": "ViewStyle",
       "description": "Custom container styling for inline text"
     },
-    {"name": "alignToStart", "type": "boolean", "description": "Should content be align to start", "default": "center"},
+    {
+      "name": "alignToStart",
+      "type": "boolean",
+      "description": "Should content be align to start",
+      "default": "center"
+    },
     {
       "name": "horizontalAlignment",
       "type": "HorizontalAlignment",
       "description": "Content horizontal alignment",
       "default": "center"
     },
-    {"name": "containerStyle", "type": "ViewStyle", "description": "Custom container style"},
-    {"name": "onPress", "type": "TouchableOpacityProps['onPress']", "description": "The item's action handler"},
+    {
+      "name": "containerStyle",
+      "type": "ViewStyle",
+      "description": "Custom container style"
+    },
+    {
+      "name": "onPress",
+      "type": "TouchableOpacityProps['onPress']",
+      "description": "The item's action handler"
+    },
     {
       "name": "renderOverlay",
       "type": "() => React.ReactElement",
       "description": "Renders an overlay on top of the image"
     },
-    {"name": "testID", "type": "string", "description": "Test ID for component"}
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "Test ID for component"
+    }
   ],
   "snippet": [
     "<GridListItem key={index$1} title={'Title'$2} subtitle={'Subtitle'$3} description={'Description goes here'$4}/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "GridListItem",
+      "description": "Grid list items represent individual items in a grid view.\nEach item can display optional text below or on top the image",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridListItem/gridListItem_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "table",
+            "columns": [
+              "Property",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Media Item",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Avatar",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle",
+                      "avatar": {
+                        "source": {
+                          "uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/avatar_1.jpg"
+                        },
+                        "size": "XLarge"
+                      }
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Custom component",
+                "description": "(renderCustomItem)",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle",
+                      "thumbnail": {
+                        "source": {
+                          "uri": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/icons/icon%20examples%20for%20docs/CustomComponent_Square.png"
+                        }
+                      }
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Media Types"
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Property",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Text under image (default)",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "OverlayText",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle",
+                      "overlayText": true
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Layout"
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Property",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Title (default)",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Subtitle",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Description",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle",
+                      "description": "Description"
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Text Types"
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Property",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Text alignment",
+                "description": "horizontalAlignment",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "horizontalAlignment": "center"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Max lines number",
+                "description": "markdown:\ntitleLines
 \nsubtitleLines
 \ndescriptionLines  ",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "This text shows a long text example",
+                      "subtitle": "This text shows a long text example",
+                      "description": "This text shows a long text example",
+                      "titleLines": 2,
+                      "subtitleLines": 2,
+                      "descriptionLines": 2
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Text color",
+                "description": "titleColor
 \nsubtitleColor
 \ndescriptionColor",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle",
+                      "description": "Description",
+                      "titleColor": "#9A27D5",
+                      "subtitleColor": "#116DFF",
+                      "descriptionColor": "#008563"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Text styles",
+                "description": "titleTypography   \nsubtitleTypography  \ndescriptionTypography",
+                "content": [
+                  {
+                    "props": {
+                      "itemSize": 124,
+                      "title": "Title",
+                      "subtitle": "Subtitle",
+                      "description": "Description",
+                      "titleTypography": "headingL",
+                      "subtitleTypography": "bodyMedium",
+                      "descriptionTypography": "bodyMedium"
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Styling Options"
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/hint/hint.api.json

@@ -4,14 +4,40 @@
   "description": "Hint component for displaying a tooltip over wrapped component",
   "note": "You can either wrap a component or pass a specific targetFrame",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.tsx",
-  "images": ["https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true"],
+  "images": [
+    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true"
+  ],
   "props": [
-    {"name": "visible", "type": "boolean", "description": "Control the visibility of the hint"},
-    {"name": "color", "type": "string", "description": "The hint background color"},
-    {"name": "message", "type": "string | ReactElement", "description": "The hint message"},
-    {"name": "messageStyle", "type": "TextStyle", "description": "The hint message custom style"},
-    {"name": "icon", "type": "ImageSourcePropType", "description": "Icon to show next to the hint's message"},
-    {"name": "iconStyle", "type": "ImageStyle", "description": "The icon's style"},
+    {
+      "name": "visible",
+      "type": "boolean",
+      "description": "Control the visibility of the hint"
+    },
+    {
+      "name": "color",
+      "type": "string",
+      "description": "The hint background color"
+    },
+    {
+      "name": "message",
+      "type": "string | ReactElement",
+      "description": "The hint message"
+    },
+    {
+      "name": "messageStyle",
+      "type": "TextStyle",
+      "description": "The hint message custom style"
+    },
+    {
+      "name": "icon",
+      "type": "ImageSourcePropType",
+      "description": "Icon to show next to the hint's message"
+    },
+    {
+      "name": "iconStyle",
+      "type": "ImageStyle",
+      "description": "The icon's style"
+    },
     {
       "name": "position",
       "type": "TOP | BOTTOM",
@@ -23,12 +49,36 @@
       "type": "{x?: number, y?: number, width?: number, height?: number}",
       "description": "Provide custom target position instead of wrapping a child"
     },
-    {"name": "useModal", "type": "boolean", "description": "Open the hint using a Modal component"},
-    {"name": "useSideTip", "type": "boolean", "description": "Show side tips instead of the middle tip"},
-    {"name": "borderRadius", "type": "number", "description": "The hint's border radius"},
-    {"name": "edgeMargins", "type": "number", "description": "Hint margins from screen edges"},
-    {"name": "offset", "type": "number", "description": "Hint offset from target"},
-    {"name": "onPress", "type": "() => void", "description": "Callback for Hint press"},
+    {
+      "name": "useModal",
+      "type": "boolean",
+      "description": "Open the hint using a Modal component"
+    },
+    {
+      "name": "useSideTip",
+      "type": "boolean",
+      "description": "Show side tips instead of the middle tip"
+    },
+    {
+      "name": "borderRadius",
+      "type": "number",
+      "description": "The hint's border radius"
+    },
+    {
+      "name": "edgeMargins",
+      "type": "number",
+      "description": "Hint margins from screen edges"
+    },
+    {
+      "name": "offset",
+      "type": "number",
+      "description": "Hint offset from target"
+    },
+    {
+      "name": "onPress",
+      "type": "() => void",
+      "description": "Callback for Hint press"
+    },
     {
       "name": "onBackgroundPress",
       "type": "(event: GestureResponderEvent) => void",
@@ -39,20 +89,128 @@
       "type": "string",
       "description": "Color for background overlay (require onBackgroundPress)"
     },
-    {"name": "containerWidth", "type": "number", "description": "The hint container width"},
+    {
+      "name": "containerWidth",
+      "type": "number",
+      "description": "The hint container width"
+    },
     {
       "name": "customContent",
       "type": "JSX.Element",
       "description": "Custom content element to render inside the hint container"
     },
-    {"name": "removePaddings", "type": "boolean", "description": "Remove all hint's paddings"},
-    {"name": "enableShadow", "type": "boolean", "description": "Enable shadow (for hint with white background only)"},
-    {"name": "testID", "type": "string", "description": "The hint's test identifier"},
-    {"name": "style", "type": "ViewStyle", "description": "Additional styling"}
+    {
+      "name": "removePaddings",
+      "type": "boolean",
+      "description": "Remove all hint's paddings"
+    },
+    {
+      "name": "enableShadow",
+      "type": "boolean",
+      "description": "Enable shadow (for hint with white background only)"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "The hint's test identifier"
+    },
+    {
+      "name": "style",
+      "type": "ViewStyle",
+      "description": "Additional styling"
+    }
   ],
   "snippet": [
     "<Hint visible={isVisible$1} message={'Message goes here'$2} color={Colors.red30$3} onBackgroundPress={() => setVisible(false)$4}>",
     "  <Text>Text to hint</Text>",
     "</Hint>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "Hint",
+      "description": "A hint is used to draw the user’s attention to a specific part of the interface, providing information or encouraging them to take action.\nHints are typically triggered automatically at the right moment in the user journey but can also appear in response to user actions.\n\nThe hint should disappear when the user taps anywhere on the screen.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_usage.png"
+              }
+            ]
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Alignment",
+              "Top",
+              "Bottom"
+            ],
+            "items": [
+              {
+                "title": "Left"
+              },
+              {
+                "title": "Center"
+              },
+              {
+                "title": "Right"
+              }
+            ],
+            "title": "Alignment",
+            "description": "The Hint component supports different alignments, so it works well with elements anywhere on the screen."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Prop",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "None"
+              },
+              {
+                "title": "Icon"
+              }
+            ],
+            "title": "Accessories"
+          },
+          {
+            "type": "section",
+            "title": "Position",
+            "layout": "horizontal",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_position.png"
+              }
+            ],
+            "description": "markdown:\nDistance  \nKeep a distance of S2 from the component the hint is pointing at."
+          },
+          {
+            "type": "section",
+            "title": "Spec",
+            "layout": "horizontal",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_spec.png"
+              }
+            ],
+            "description": "markdown:\nThe Hint component adjusts to its content.  \nMax width: screen width, S4 margins."
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/modal/index.js

@@ -6,6 +6,7 @@ import { BlurViewPackage } from "../../optionalDependencies";
 import { Constants, asBaseComponent } from "../../commons/new";
 import TopBar, { ModalTopBarProps } from "./TopBar";
 import View from "../../components/view";
+import { LogService } from "../../services";
 const BlurView = BlurViewPackage?.BlurView;
 export { ModalTopBarProps };
 /**
@@ -20,7 +21,8 @@ class Modal extends Component {
   constructor(props) {
     super(props);
     if (props.enableModalBlur && !BlurView) {
-      console.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
   renderTouchableOverlay() {

package/src/components/pieChart/index.js

@@ -6,6 +6,7 @@ const {
   Svg,
   Path
 } = SvgPackage;
+import { LogService } from "../../services";
 const DEFAULT_DIAMETER = 144;
 const PieChart = props => {
   const {
@@ -14,7 +15,7 @@ const PieChart = props => {
     ...others
   } = props;
   if (!Svg || !Path) {
-    console.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
+    LogService.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
     return null;
   }
   const renderPieSegments = () => {