react-native-ui-lib 7.38.1 → 7.39.0

package/src/components/colorSwatch/colorSwatch.api.json

@@ -13,14 +13,166 @@
       "description": "The identifier value of the ColorSwatch in a ColorSwatch palette",
       "note": "Must be different than other ColorSwatches in the same group"
     },
-    {"name": "color", "type": "string", "description": "The color of the ColorSwatch"},
-    {"name": "selected", "type": "boolean", "description": "Is the initial state is selected"},
-    {"name": "animated", "type": "boolean", "description": "Is first render should be animated"},
-    {"name": "onPress", "type": "(value: string, colorInfo: ColorInfo) => void", "description": "Callback from press event"},
-    {"name": "index", "type": "number", "description": "The index of the Swatch if in array"},
-    {"name": "style", "type": "ViewStyle", "description": "Component's style"},
-    {"name": "unavailable", "type": "boolean", "description": "Is the initial state is unavailable"},
-    {"name": "size", "type": "number", "description": "Color Swatch size"}
+    {
+      "name": "color",
+      "type": "string",
+      "description": "The color of the ColorSwatch"
+    },
+    {
+      "name": "selected",
+      "type": "boolean",
+      "description": "Is the initial state is selected"
+    },
+    {
+      "name": "animated",
+      "type": "boolean",
+      "description": "Is first render should be animated"
+    },
+    {
+      "name": "onPress",
+      "type": "(value: string, colorInfo: ColorInfo) => void",
+      "description": "Callback from press event"
+    },
+    {
+      "name": "index",
+      "type": "number",
+      "description": "The index of the Swatch if in array"
+    },
+    {
+      "name": "style",
+      "type": "ViewStyle",
+      "description": "Component's style"
+    },
+    {
+      "name": "unavailable",
+      "type": "boolean",
+      "description": "Is the initial state is unavailable"
+    },
+    {
+      "name": "size",
+      "type": "number",
+      "description": "Color Swatch size"
+    }
   ],
-  "snippet": ["<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"]
+  "snippet": [
+    "<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"
+  ],
+  "docs": {
+    "hero": {
+      "title": "ColorSwatch",
+      "description": "A swatch is a sample of a color. Swatches behavior is somewhat similar to this of a RadioButton, so only a single swatch can be selected at a given moment. ",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorSwatch/ColorSwatch_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "table",
+            "columns": [
+              "Style",
+              "Default state",
+              "Selected",
+              "Unavailable"
+            ],
+            "items": [
+              {
+                "title": "Light color",
+                "content": [
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "color": "#FFFFFF"
+                    }
+                  },
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "color": "#FFFFFF",
+                      "selected": true
+                    }
+                  },
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "color": "#FFFFFF",
+                      "unavailable": true
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Dark color",
+                "content": [
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "color": "#000000"
+                    }
+                  },
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "color": "#000000",
+                      "selected": true
+                    }
+                  },
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "color": "#000000",
+                      "unavailable": true
+                    }
+                  }
+                ]
+              },
+              {
+                "title": "Transparent",
+                "content": [
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "transparent": true
+                    }
+                  },
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "transparent": true,
+                      "selected": true
+                    }
+                  },
+                  {
+                    "background": "#E8ECF0",
+                    "props": {
+                      "transparent": true,
+                      "unavailable": true
+                    }
+                  }
+                ]
+              }
+            ],
+            "title": "Swatch Styles and States"
+          },
+          {
+            "type": "section",
+            "layout": "horizontal",
+            "title": "Spec",
+            "description": "markdown:Border width 1px.\n\n‘Unavailable’ swatch can be either tappable or “disabled”. ",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorSwatch/ColorSwatch_spec.png"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }

package/src/components/connectionStatusBar/index.js

@@ -7,6 +7,7 @@ import { Colors, Typography } from "../../style";
 import TouchableOpacity from "../touchableOpacity";
 import View from "../view";
 import { Constants, asBaseComponent } from "../../commons/new";
+import { LogService } from "../../services";
 import { ConnectionStatusBarProps, DEFAULT_PROPS } from "./types";
 export { ConnectionStatusBarProps };
 
@@ -36,7 +37,8 @@ class ConnectionStatusBar extends PureComponent {
     if (NetInfo) {
       this.getInitialConnectionState();
     } else {
-      console.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
     }
   }
   generateStyles() {

package/src/components/dateTimePicker/index.js

@@ -11,6 +11,7 @@ import Button from "../button";
 import ExpandableOverlay from "../../incubator/expandableOverlay";
 import useOldApi from "./useOldApi";
 import { isSameDate, isSameHourAndMinute } from "../../utils/dateUtils";
+import { LogService } from "../../services";
 /*eslint-disable*/
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
@@ -64,7 +65,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   useEffect(() => {
     if (!RNDateTimePicker) {
       // eslint-disable-next-line max-len
-      console.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
+      LogService.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
     }
   }, []);
   useDidUpdate(() => {

package/src/components/dateTimePicker/useOldApi.js

@@ -1,6 +1,7 @@
 // TODO: delete whole file in v8
 import { useEffect } from 'react';
 import { MomentPackage as moment } from "../../optionalDependencies";
+import { LogService } from "../../services";
 
 // This file will be deleted in the next major version,
 // duplicating these here will make this less complicated
@@ -15,7 +16,8 @@ const useOldApi = props => {
   } = props;
   useEffect(() => {
     if (!moment && (dateFormat || timeFormat)) {
-      console.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
     }
   }, [dateFormat, timeFormat]);
   const getStringValue = (value, mode) => {

package/src/components/gridList/gridList.api.json

@@ -2,12 +2,24 @@
   "name": "GridList",
   "category": "lists",
   "description": "An auto-generated grid list that calculate item size according to given props",
-  "extends": ["FlatList"],
-  "extendsLink": ["https://reactnative.dev/docs/flatlist"],
+  "extends": [
+    "FlatList"
+  ],
+  "extendsLink": [
+    "https://reactnative.dev/docs/flatlist"
+  ],
   "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridListScreen.tsx",
   "props": [
-    {"name": "numColumns", "type": "number", "description": "Number of items to show in a row (ignored when passing maxItemWidth)"},
-    {"name": "itemSpacing", "type": "number", "description": "Spacing between each item"},
+    {
+      "name": "numColumns",
+      "type": "number",
+      "description": "Number of items to show in a row (ignored when passing maxItemWidth)"
+    },
+    {
+      "name": "itemSpacing",
+      "type": "number",
+      "description": "Spacing between each item"
+    },
     {
       "name": "maxItemWidth",
       "type": "number",
@@ -42,5 +54,83 @@
     " itemSpacing={Spacings.s3$4}",
     " listPadding={Spacings.s5$5}",
     "/>"
-  ]
+  ],
+  "docs": {
+    "hero": {
+      "title": "GridList",
+      "description": "GridList display a collection of GridListItems organized in a repeated grid pattern. \n\nGridList allows users to scan content based on images and compare items within a collection.",
+      "type": "hero",
+      "layout": "horizontal",
+      "content": [
+        {
+          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_cover.png"
+        }
+      ]
+    },
+    "tabs": [
+      {
+        "title": "Overview",
+        "sections": [
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "GridList with Avatars",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_usage_avatars.png"
+                  }
+                ]
+              },
+              {
+                "title": "GridList with MediaItems",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_usage_mediaItems.png"
+                  }
+                ]
+              }
+            ],
+            "layout": "horizontal",
+            "title": "Usage Examples"
+          },
+          {
+            "type": "list",
+            "items": [
+              {
+                "title": "Option 1 - Max Item Width",
+                "description": "Set maximum width of a single item, and amount of items in a row will be set automatically according to screen width. 
Columns number will be dynamic according to how many items fit the screen.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_columns_maxWidth.png"
+                  }
+                ]
+              },
+              {
+                "title": "Option 2 - Column Number",
+                "description": "Set amount of columns, and items width will be automatic according to screen width. Columns number will be fixed.",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_columns_number.png"
+                  }
+                ]
+              }
+            ],
+            "title": "Columns Options"
+          },
+          {
+            "type": "section",
+            "layout": "horizontal",
+            "title": "Spec",
+            "description": "markdown: \n### Spacing between items\nHorizontal gutter by default is minimum S4 and can be modified.  \nVertical gutter is equal to horizontal gutter.\n### Last item counter\nOnce grid reaches Max of items, the last item should get an overlay color and number of remaining items.  \nThe item content shouldn’t be displayed.  \nThis state is available in the MediaItem and Avatar components.",
+            "content": [
+              {
+                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/GridList/gridList_spec.png"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
 }