react-native-ui-lib 7.38.1 → 7.39.0

package/src/components/progressBar/progressBar.api.json

@@ -4,10 +4,27 @@
   "description": "Progress bar",
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.tsx",
   "props": [
-    {"name": "progress", "type": "number", "description": "The progress of the bar from 0 to 100", "default": "0"},
-    {"name": "fullWidth", "type": "boolean", "description": "FullWidth Ui preset"},
-    {"name": "style", "type": "ViewStyle", "description": "Override container style"},
-    {"name": "progressColor", "type": "string", "description": "Progress color"},
+    {
+      "name": "progress",
+      "type": "number",
+      "description": "The progress of the bar from 0 to 100",
+      "default": "0"
+    },
+    {
+      "name": "fullWidth",
+      "type": "boolean",
+      "description": "FullWidth Ui preset"
+    },
+    {
+      "name": "style",
+      "type": "ViewStyle",
+      "description": "Override container style"
+    },
+    {
+      "name": "progressColor",
+      "type": "string",
+      "description": "Progress color"
+    },
     {
       "name": "customElement",
       "type": "JSX.Element",
@@ -16,5 +33,137 @@
   ],
   "snippet": [
     "<ProgressBar progress={55$1} progressColor={Colors.red30$2}/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "ProgressBar",
+      "description": "ProgressBar is a linear progress indicators, that express the length of a process. It should be used when the process completion rate can be detected. As the completion rate increases, the track fills from 0 to 100%. The ProgressBar can be accompanied by a textual representation of the progress in a percent format.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Inline (Default)",
+                "description": "Inline Progress Bar attached to a container, such as a card, can indicate the process applies to that particular item.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_inline.png"
+                  }
+                ]
+              },
+              {
+                "title": "Full Width",
+                "description": "Indicates progress with the screen’s content.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_fullWidth.png"
+                  }
+                ]
+              },
+              {
+                "title": "Animated",
+                "description": "In cases where the progress will take about a minute to complete, use an animated progress bar with a stripes pattern ",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_usage_animated.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Usage Examples"
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Property",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Default",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_default.png"
+                  }
+                ]
+              },
+              {
+                "title": "AnimatedStripes",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_AnimatedStripes.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Types"
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Property",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Inline (default)",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_default.png"
+                  }
+                ]
+              },
+              {
+                "title": "FullWidth",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_fullWidth.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Size"
+          },
+          {
+            "type": "section"
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Phone spec",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_spec_phone.png"
+                  }
+                ]
+              },
+              {
+                "title": "Tablet spec",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ProgressBar/progressBar_spec_tablet.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Spec",
+            "layout": "horizontal"
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/radioButton/index.js

@@ -179,6 +179,13 @@ class RadioButton extends PureComponent {
       }]} />
       </View>;
   }
+  getAccessibleHitSlop(size) {
+    const verticalPadding = Math.max(0, (48 - size) / 2);
+    return {
+      top: verticalPadding,
+      bottom: verticalPadding
+    };
+  }
   render() {
     const {
       onPress,
@@ -190,7 +197,7 @@ class RadioButton extends PureComponent {
     const Container = onPress || onValueChange ? TouchableOpacity : View;
     return (
       // @ts-ignore
-      <Container row centerV activeOpacity={1} {...others} style={containerStyle} onPress={this.onPress} {...this.getAccessibilityProps()}>
+      <Container row centerV activeOpacity={1} {...others} style={containerStyle} onPress={this.onPress} {...this.getAccessibilityProps()} hitSlop={this.getAccessibleHitSlop(this.props.size || DEFAULT_SIZE)}>
         {!contentOnLeft && this.renderButton()}
         {this.props.iconOnRight ? this.renderLabel() : this.renderIcon()}
         {this.props.iconOnRight ? this.renderIcon() : this.renderLabel()}

package/src/components/skeletonView/index.js

@@ -9,6 +9,7 @@ import { BorderRadiuses, Colors, Dividers, Spacings } from "../../style";
 import { createShimmerPlaceholder, LinearGradientPackage } from "../../optionalDependencies";
 import View from "../view";
 import { Constants } from "../../commons/new";
+import { LogService } from "../../services";
 const LinearGradient = LinearGradientPackage?.default;
 let ShimmerPlaceholder;
 const ANIMATION_DURATION = 400;
@@ -62,9 +63,9 @@ class SkeletonView extends Component {
       opacity: new Animated.Value(0)
     };
     if (_isUndefined(LinearGradientPackage?.default)) {
-      console.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
     } else if (_isUndefined(createShimmerPlaceholder)) {
-      console.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
     } else if (ShimmerPlaceholder === undefined) {
       ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);
     }

package/src/components/stepper/stepper.api.json

@@ -5,10 +5,26 @@
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/StepperScreen.tsx",
   "images": [],
   "props": [
-    {"name": "type", "type": "StepperType", "description": "Stepper style type"},
-    {"name": "value", "type": "number", "description": "Stepper value"},
-    {"name": "minValue", "type": "number", "description": "Minimum value"},
-    {"name": "maxValue", "type": "number", "description": "Maximum value"},
+    {
+      "name": "type",
+      "type": "StepperType",
+      "description": "Stepper style type"
+    },
+    {
+      "name": "value",
+      "type": "number",
+      "description": "Stepper value"
+    },
+    {
+      "name": "minValue",
+      "type": "number",
+      "description": "Minimum value"
+    },
+    {
+      "name": "maxValue",
+      "type": "number",
+      "description": "Maximum value"
+    },
     {
       "name": "step",
       "type": "number",
@@ -20,12 +36,213 @@
       "type": "(value: number, testID?: string) => void",
       "description": "Value change callback function"
     },
-    {"name": "disabled", "type": "boolean", "description": "Disables interaction with the stepper"},
-    {"name": "small", "type": "boolean", "description": "Renders a small sized Stepper"},
-    {"name": "accessibilityLabel", "type": "string", "description": "Component accessibility label"},
-    {"name": "testID", "type": "string", "description": "Test id for component"}
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "description": "Disables interaction with the stepper"
+    },
+    {
+      "name": "small",
+      "type": "boolean",
+      "description": "Renders a small sized Stepper"
+    },
+    {
+      "name": "accessibilityLabel",
+      "type": "string",
+      "description": "Component accessibility label"
+    },
+    {
+      "name": "testID",
+      "type": "string",
+      "description": "Test id for component"
+    }
   ],
   "snippet": [
     "<Stepper$1/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "Stepper",
+      "description": "The Stepper lets users easily increase or decrease a value by small amounts. Steppers are best used when the user needs to adjust the value by small increments.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Stepper/Stepper_overview_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "section",
+            "title": "Usage Examples",
+            "content": [
+              {
+                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Guidelines-to-Docs?node-id=2394-210062&m=dev&embed-host=share&page-selector=false"
+              }
+            ]
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Style",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Default",
+                "description": "Primarily used in form screens, typically within list items.",
+                "content": [
+                  {
+                    "props": {
+                      "value": 1
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Floating ",
+                "description": "Ideal to be used over images, such as when adding multiple items to a cart.",
+                "content": [
+                  {
+                    "props": {
+                      "type": "floating",
+                      "value": 1
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Styles"
+          },
+          {
+            "type": "table",
+            "columns": [
+              "Size",
+              "Preview"
+            ],
+            "items": [
+              {
+                "title": "Large",
+                "content": [
+                  {
+                    "props": {
+                      "value": 1
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Small",
+                "content": [
+                  {
+                    "props": {
+                      "small": true,
+                      "value": 1
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Sizes",
+            "description": "Relevant only for the default style."
+          },
+          {
+            "type": "table",
+            "columns": [
+              "State",
+              "Default",
+              "Floating"
+            ],
+            "items": [
+              {
+                "title": "Active",
+                "content": [
+                  {
+                    "props": {
+                      "value": 1
+                    }
+                  },
+                  {
+                    "props": {
+                      "value": 1,
+                      "type": "floating"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Disabled",
+                "content": [
+                  {
+                    "props": {
+                      "value": 1,
+                      "disabled": true
+                    }
+                  },
+                  {
+                    "props": {
+                      "value": 1,
+                      "disabled": true,
+                      "type": "floating"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Reached min value",
+                "content": [
+                  {
+                    "props": {
+                      "value": 0,
+                      "minValue": 0
+                    }
+                  },
+                  {
+                    "props": {
+                      "value": 0,
+                      "minValue": 0,
+                      "type": "floating"
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Reached max value",
+                "content": [
+                  {
+                    "props": {
+                      "value": 99,
+                      "maxValue": 99
+                    }
+                  },
+                  {
+                    "props": {
+                      "value": 99,
+                      "maxValue": 99,
+                      "type": "floating"
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "States"
+          },
+          {
+            "type": "section",
+            "title": "Spec",
+            "layout": "horizontal",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Stepper/Stepper_overview_spec.png"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/svgImage/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { isSvg, isSvgUri } from "../../utils/imageUtils";
 import { SvgPackage, SvgCssUri } from "../../optionalDependencies";
+import { LogService } from "../../services";
 const SvgXml = SvgPackage?.SvgXml;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
 
@@ -14,7 +15,7 @@ function SvgImage(props) {
   } = props;
   if (!SvgXml) {
     // eslint-disable-next-line max-len
-    console.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
+    LogService.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
     return null;
   }
   if (isSvgUri(data)) {

package/src/components/test.api.json

@@ -143,7 +143,7 @@
                 "description": "Item #2 Subtitle",
                 "content": [
                   {
-                    "value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
+                    "snippet": "<Text text30>This is a code snippet</Text>"
                   }
                 ]
               },
@@ -285,38 +285,6 @@
             "description": "html:<h2>Title</h2><p>This is a html content</p><ul><li>item 1</li><li>item 2</li></ul>"
           }
         ]
-      },
-      {
-        "title": "Code",
-        "sections": [
-          {
-            "title": "Usage",
-            "type": "usage"
-          },
-          {
-            "type": "info"
-          },
-          {
-            "type": "tip"
-          },
-          {
-            "type": "banner",
-            "title": "NOTE",
-            "description": "This is an interesting information"
-          },
-          {
-            "type": "banner",
-            "title": "Banner",
-            "description": "This is some massage to the user",
-            "color": "pink",
-            "icon": ""
-          },
-          {
-            "type": "props",
-            "title": "API",
-            "description": "This is the list of additional props for the Text component"
-          }
-        ]
       }
     ]
   }