react-native-ui-lib 7.39.0-snapshot.6564 → 7.39.0-snapshot.6571

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6564",
+  "version": "7.39.0-snapshot.6571",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -32,13 +32,15 @@
     "pre-push": "npm run build:dev && npm run test",
     "docs:deploy": "./scripts/docs/deployDocs.sh",
     "docs:build": "node scripts/docs/buildDocs.js",
+    "docs:start": "(cd docuilib && yarn start)",
     "calendar:createMocks": "node scripts/createCalendarMockData.js",
     "snippets:build": "node scripts/generateSnippets.js",
     "release": "node ./scripts/release/release.js",
     "releaseDemo": "./scripts/release/releaseDemo.sh",
     "releaseDocs": "./scripts/release/releaseDocs.sh",
     "releaseEslint": "./scripts/release/releaseEslint.sh",
-    "releaseNative": "./scripts/release/releaseNative.sh"
+    "releaseNative": "./scripts/release/releaseNative.sh",
+    "update-web-assets": "node scripts/assets/extract-dimensions.js"
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",

package/scripts/docs/buildDocsCommon.js

@@ -88,13 +88,9 @@ function processComponents(components) {
     content += `sidebar_label: ${componentName}\n`;
     content += '---\n\n';
 
-    if (component.docs) {
-      content += `import ComponentPage from '@site/src/components/ComponentPage';\n\n`;
-      const componentObject = JSON.stringify(component);
-      content += `<ComponentPage component={${componentObject}}/>\n`;
-    } else {
-      content += `${buildOldDocs(component)}\n`;
-    }
+    content += `import ComponentPage from '@site/src/components/ComponentPage';\n\n`;
+    const componentObject = JSON.stringify(component);
+    content += `<ComponentPage component={${componentObject}}/>\n`;
 
     let dirPath;
     switch (component.category) {
@@ -153,84 +149,4 @@ function logStatistics(components) {
   }
 }
 
-function buildOldDocs(component) {
-  let content = '';
-  content += `import UILivePreview from '@site/src/components/UILivePreview';\n\n`;
-
-  /* General Info */
-  content += `${component.description}  \n`;
-  if (typeof component.example === 'string') {
-    content += `[(code example)](${component.example})\n`;
-  } else if (Array.isArray(component.example)) {
-    content += '(code examples: ';
-    component.example.forEach((example, index) => {
-      const slashIndex = example.lastIndexOf('/');
-      const dotIndex = example.lastIndexOf('.');
-      content += `${index > 0 ? ', ' : ''}[${example.slice(slashIndex + 1, dotIndex)}](${example})`;
-    });
-    content += ')\n';
-  }
-
-  if (component.extends) {
-    let extendsText = component.extends?.join(', ');
-    if (component.extendsLink) {
-      extendsText = `[${extendsText}](${component.extendsLink})`;
-    } else {
-      extendsText = _.map(component.extends, generateExtendsLink).join(', ');
-    }
-    content += ':::info\n';
-    content += `This component extends **${extendsText}** props.\n`;
-    content += ':::\n';
-  }
-
-  if (component.modifiers) {
-    content += ':::tip\n';
-    content += `This component support **${component.modifiers?.join(', ')}** modifiers.\n`;
-    content += ':::\n';
-  }
-
-  if (component.caution) {
-    content += ':::caution\n';
-    content += `${component.caution}\n`;
-    content += ':::\n';
-  }
-
-  if (component.note) {
-    content += ':::note\n';
-    content += `${component.note}\n`;
-    content += ':::\n';
-  }
-
-  /* Images */
-  content += `<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>`;
-  component.images?.forEach(image => {
-    content += `<img style={{maxHeight: '420px'}} src={'${image}'}/>`;
-    content += '\n\n';
-  });
-  content += '</div>\n\n';
-
-  /* Snippet */
-  if (component.snippet) {
-    content += `### Usage\n`;
-    content += `<UILivePreview componentName={"${component.name}"} code={\`${component.snippet
-      ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
-      .join('\n')
-      .toString()}\`}/>\n\n`;
-  }
-
-  /* Props */
-  content += '## API\n';
-  _.sortBy(component.props, p => p.name)?.forEach(prop => {
-    content += `### ${prop.name}\n`;
-    if (prop.note) {
-      content += `#### ${prop.note}\n`;
-    }
-    content += `${prop.description}\n`;
-    // content += `<span style={{color: 'grey'}}>${_.escape(prop.type)}</span>\n\n`;
-    content += `\`${prop.type} \` \n\n`;
-  });
-
-  return content;
-}
-
 module.exports = {buildDocs};

package/src/assets/internal/icons/index.js

@@ -1,38 +1,38 @@
 export const icons = {
   get check() {
-    return {uri: require('./check.png'), width: 21, height: 15};
+    return require('./check.png');
   },
   get checkMarkSmall() {
-    return {uri: require('./checkMarkSmall.png'), width: 16, height: 16};
+    return require('./checkMarkSmall.png');
   },
   get checkSmall() {
-    return {uri: require('./checkSmall.png'), width: 24, height: 24};
+    return require('./checkSmall.png');
   },
   get chevronDown() {
-    return {uri: require('./chevronDown.png'), width: 16, height: 16};
+    return require('./chevronDown.png');
   },
   get exclamationSmall() {
-    return {uri: require('./exclamationSmall.png'), width: 16, height: 16};
+    return require('./exclamationSmall.png');
   },
   get minusSmall() {
-    return {uri: require('./minusSmall.png'), width: 16, height: 16};
+    return require('./minusSmall.png');
   },
   get plusSmall() {
-    return {uri: require('./plusSmall.png'), width: 16, height: 16};
+    return require('./plusSmall.png');
   },
   get search() {
-    return {uri: require('./search.png'), width: 24, height: 24};
+    return require('./search.png');
   },
   get x() {
-    return {uri: require('./x.png'), width: 17, height: 16};
+    return require('./x.png');
   },
   get xFlat() {
-    return {uri: require('./xFlat.png'), width: 16, height: 16};
+    return require('./xFlat.png');
   },
   get xMedium() {
-    return {uri: require('./xMedium.png'), width: 24, height: 24};
+    return require('./xMedium.png');
   },
   get xSmall() {
-    return {uri: require('./xSmall.png'), width: 16, height: 16};
+    return require('./xSmall.png');
   }
 };

package/src/assets/internal/icons/index.web.js

@@ -0,0 +1,38 @@
+export const icons = {
+  get check() {
+    return {uri: require('./check.png'), width: 21, height: 15};
+  },
+  get checkMarkSmall() {
+    return {uri: require('./checkMarkSmall.png'), width: 16, height: 16};
+  },
+  get checkSmall() {
+    return {uri: require('./checkSmall.png'), width: 24, height: 24};
+  },
+  get chevronDown() {
+    return {uri: require('./chevronDown.png'), width: 16, height: 16};
+  },
+  get exclamationSmall() {
+    return {uri: require('./exclamationSmall.png'), width: 16, height: 16};
+  },
+  get minusSmall() {
+    return {uri: require('./minusSmall.png'), width: 16, height: 16};
+  },
+  get plusSmall() {
+    return {uri: require('./plusSmall.png'), width: 16, height: 16};
+  },
+  get search() {
+    return {uri: require('./search.png'), width: 24, height: 24};
+  },
+  get x() {
+    return {uri: require('./x.png'), width: 17, height: 16};
+  },
+  get xFlat() {
+    return {uri: require('./xFlat.png'), width: 16, height: 16};
+  },
+  get xMedium() {
+    return {uri: require('./xMedium.png'), width: 24, height: 24};
+  },
+  get xSmall() {
+    return {uri: require('./xSmall.png'), width: 16, height: 16};
+  }
+};

package/src/assets/internal/images/index.js

@@ -1,26 +1,26 @@
 export const images = {
   get gradient() {
-    return {uri: require('./gradient.png'), width: 56, height: 2};
+    return require('./gradient.png');
   },
   get gradientOverlay() {
-    return {uri: require('./gradientOverlay.png'), width: 76, height: 48};
+    return require('./gradientOverlay.png');
   },
   get gradientOverlayHigh() {
-    return {uri: require('./gradientOverlayHigh.png'), width: 1, height: 297};
+    return require('./gradientOverlayHigh.png');
   },
   get gradientOverlayLow() {
-    return {uri: require('./gradientOverlayLow.png'), width: 1, height: 297};
+    return require('./gradientOverlayLow.png');
   },
   get gradientOverlayMedium() {
-    return {uri: require('./gradientOverlayMedium.png'), width: 1, height: 297};
+    return require('./gradientOverlayMedium.png');
   },
   get hintTipMiddle() {
-    return {uri: require('./hintTipMiddle.png'), width: 20, height: 7};
+    return require('./hintTipMiddle.png');
   },
   get hintTipSide() {
-    return {uri: require('./hintTipSide.png'), width: 20, height: 24};
+    return require('./hintTipSide.png');
   },
   get transparentSwatch() {
-    return {uri: require('./transparentSwatch.png'), width: 100, height: 100};
+    return require('./transparentSwatch.png');
   }
 };

package/src/assets/internal/images/index.web.js

@@ -0,0 +1,26 @@
+export const images = {
+  get gradient() {
+    return {uri: require('./gradient.png'), width: 56, height: 2};
+  },
+  get gradientOverlay() {
+    return {uri: require('./gradientOverlay.png'), width: 76, height: 48};
+  },
+  get gradientOverlayHigh() {
+    return {uri: require('./gradientOverlayHigh.png'), width: 1, height: 297};
+  },
+  get gradientOverlayLow() {
+    return {uri: require('./gradientOverlayLow.png'), width: 1, height: 297};
+  },
+  get gradientOverlayMedium() {
+    return {uri: require('./gradientOverlayMedium.png'), width: 1, height: 297};
+  },
+  get hintTipMiddle() {
+    return {uri: require('./hintTipMiddle.png'), width: 20, height: 7};
+  },
+  get hintTipSide() {
+    return {uri: require('./hintTipSide.png'), width: 20, height: 24};
+  },
+  get transparentSwatch() {
+    return {uri: require('./transparentSwatch.png'), width: 100, height: 100};
+  }
+};

package/src/components/avatar/index.d.ts

@@ -1,5 +1,5 @@
 import React, { PropsWithChildren } from 'react';
-import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, AccessibilityProps } from 'react-native';
+import { StyleProp, ViewStyle, ImagePropsBase, ImageStyle, TextStyle, TextProps, AccessibilityProps } from 'react-native';
 import { BadgeProps } from '../badge';
 import { ImageProps } from '../image';
 import { AnimatedImageProps } from '../animatedImage';
@@ -95,6 +95,7 @@ export type AvatarProps = Pick<AccessibilityProps, 'accessibilityLabel'> & Props
      * The label color
      */
     labelColor?: string;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -223,6 +224,7 @@ declare const Avatar: React.ForwardRefExoticComponent<Pick<AccessibilityProps, "
      * The label color
      */
     labelColor?: string | undefined;
+    labelEllipsizeMode?: TextProps['ellipsizeMode'];
     /**
      * ribbon label to display on the avatar
      */
@@ -345,6 +347,7 @@ declare const _default: React.ForwardRefExoticComponent<Pick<AccessibilityProps,
      * The label color
      */
     labelColor?: string | undefined;
+    labelEllipsizeMode?: "middle" | "head" | "tail" | "clip" | undefined;
     /**
      * ribbon label to display on the avatar
      */

package/src/components/avatar/index.js

@@ -56,6 +56,7 @@ const Avatar = forwardRef((props, ref) => {
     useAutoColors,
     autoColorsConfig,
     containerStyle,
+    labelEllipsizeMode = 'clip',
     onPress,
     children
   } = themeProps;
@@ -178,7 +179,7 @@ const Avatar = forwardRef((props, ref) => {
   const Container = onPress ? TouchableOpacity : View;
   return <Container style={_containerStyle} ref={ref} testID={testID} onPress={onPress} accessible={!_isUndefined(onPress)} accessibilityLabel={'Avatar'} accessibilityRole={onPress ? 'button' : 'image'} hitSlop={onPress ? hitTargetPadding : undefined} {...accessibilityProps}>
       <View testID={`${testID}.container`} style={textContainerStyle}>
-        {!_isUndefined(text) && <Text numberOfLines={1} style={textStyle} testID={`${testID}.label`}>
+        {!_isUndefined(text) && <Text numberOfLines={1} ellipsizeMode={labelEllipsizeMode} style={textStyle} testID={`${testID}.label`}>
             {text}
           </Text>}
       </View>
@@ -194,7 +195,8 @@ const styles = StyleSheet.create({
     ...StyleSheet.absoluteFillObject,
     alignItems: 'center',
     justifyContent: 'center',
-    borderRadius: BorderRadiuses.br100
+    borderRadius: BorderRadiuses.br100,
+    overflow: 'hidden'
   },
   initialsContainerWithInset: {
     top: 1,

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

@@ -159,13 +159,37 @@
             ],
             "items": [
               {
-                "title": "Left"
+                "title": "Left",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_left_bottom.png"
+                  }
+                ]
               },
               {
-                "title": "Center"
+                "title": "Center",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_center_bottom.png"
+                  }
+                ]
               },
               {
-                "title": "Right"
+                "title": "Right",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_top.png"
+                  },
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_alignment_right_bottom.png"
+                  }
+                ]
               }
             ],
             "title": "Alignment",
@@ -179,10 +203,20 @@
             ],
             "items": [
               {
-                "title": "None"
+                "title": "None",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_none.png"
+                  }
+                ]
               },
               {
-                "title": "Icon"
+                "title": "Icon",
+                "content": [
+                  {
+                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/Hint/hint_accessories_icon.png"
+                  }
+                ]
               }
             ],
             "title": "Accessories"

package/src/components/icon/index.js

@@ -2,7 +2,7 @@ import isUndefined from 'lodash/isUndefined';
 import React, { useMemo, forwardRef } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { asBaseComponent, Constants } from "../../commons/new";
-import { getAsset, isSvg, isBase64ImageContent, extractImageSource } from "../../utils/imageUtils";
+import { getAsset, isSvg, isBase64ImageContent } from "../../utils/imageUtils";
 import Badge from "../badge";
 import SvgImage from "../svgImage";
 
@@ -50,20 +50,10 @@ const Icon = forwardRef((props, ref) => {
     if (!isUndefined(assetName)) {
       return getAsset(assetName, assetGroup);
     }
-    return extractImageSource(source);
+    return source;
   }, [source, assetGroup, assetName]);
-  const sourceSizeStyle = useMemo(() => {
-    const styles = {};
-    if (iconSource?.width) {
-      styles.width = iconSource.width;
-    }
-    if (iconSource?.height) {
-      styles.height = iconSource.height;
-    }
-    return styles;
-  }, [iconSource]);
   const renderImage = () => {
-    return <Image accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others} ref={ref} source={iconSource} style={[sourceSizeStyle, margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
+    return <Image accessible={false} accessibilityRole={'image'} fsTagName={recorderTag} {...others} ref={ref} source={iconSource} style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {
       tintColor
     }, style]} />;
   };

package/src/components/image/index.js

@@ -4,7 +4,7 @@ import React, { PureComponent } from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import { StyleSheet, Image as RNImage, ImageBackground } from 'react-native';
 import { Constants, asBaseComponent } from "../../commons/new";
-import { getAsset, isSvg, extractImageSource } from "../../utils/imageUtils";
+import { getAsset, isSvg } from "../../utils/imageUtils";
 import Overlay from "../overlay";
 import SvgImage from "../svgImage";
 import View from "../view";
@@ -59,15 +59,14 @@ class Image extends PureComponent {
     return !!overlayType || this.isGif() || !_isUndefined(customOverlayContent);
   }
   getVerifiedSource(source) {
-    const sourceUri = _get(source, 'uri');
-    if (sourceUri === null || sourceUri === '') {
+    if (_get(source, 'uri') === null || _get(source, 'uri') === '') {
       // @ts-ignore
       return {
         ...source,
         uri: undefined
       };
     }
-    return extractImageSource(source);
+    return source;
   }
   getImageSource() {
     const {
@@ -148,7 +147,6 @@ class Image extends PureComponent {
       modifiers,
       recorderTag,
       borderRadius,
-      source: _source,
       ...others
     } = this.props;
     const shouldFlipRTL = supportRTL && Constants.isRTL;
@@ -158,12 +156,7 @@ class Image extends PureComponent {
     } = modifiers;
     return (
       // @ts-ignore
-      <ImageView style={[
-      // @ts-ignore
-      {
-        width: _source?.width,
-        height: _source?.height
-      }, tintColor && {
+      <ImageView style={[tintColor && {
         tintColor
       }, shouldFlipRTL && styles.rtlFlipped, width && {
         width

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

@@ -102,21 +102,53 @@
                 "title": "Generic",
                 "content": [
                   {
+                    "component": "Incubator.Toast",
                     "props": {
                       "visible": true,
-                      "message": "Mika Or was saved to contacts."
+                      "message": "Mika Or was saved to contacts.",
+                      "preset": "general"
                     }
                   }
                 ]
               },
               {
-                "title": "Success"
+                "title": "Success",
+                "content": [
+                  {
+                    "component": "Incubator.Toast",
+                    "props": {
+                      "visible": true,
+                      "message": "Post published.",
+                      "preset": "success"
+                    }
+                  }
+                ]
               },
               {
-                "title": "Validation"
+                "title": "Validation",
+                "content": [
+                  {
+                    "component": "Incubator.Toast",
+                    "props": {
+                      "visible": true,
+                      "message": "Enter a card number.",
+                      "preset": "failure"
+                    }
+                  }
+                ]
               },
               {
-                "title": "Offline Error"
+                "title": "Offline Error",
+                "content": [
+                  {
+                    "component": "Incubator.Toast",
+                    "props": {
+                      "visible": true,
+                      "message": "This action is not available offline.",
+                      "preset": "offline"
+                    }
+                  }
+                ]
               }
             ],
             "title": "Types"
@@ -126,13 +158,37 @@
             "columns": ["Prop", "Preview"],
             "items": [
               {
-                "title": "None"
+                "title": "None",
+                "content": [
+                  {
+                    "component": "Incubator.Toast",
+                    "props": {
+                      "visible": true,
+                      "message": "Action completed."
+                    }
+                  }
+                ]
               },
               {
-                "title": "With action"
+                "title": "With action",
+                "content": [
+                  {
+                    "snippet": "<Incubator.Toast visible message=\"Action completed.\" action={{label: 'Undo', onPress: () => {}}}/>"
+                  }
+                ]
               },
               {
-                "title": "With loader"
+                "title": "With loader",
+                "content": [
+                  {
+                    "component": "Incubator.Toast",
+                    "props": {
+                      "visible": true,
+                      "message": "Action completed.",
+                      "showLoader": true
+                    }
+                  }
+                ]
               }
             ],
             "title": "Accessories"

package/src/utils/imageUtils.d.ts

@@ -1,5 +1,4 @@
 import type { ImageSourceType } from '../components/image';
-export declare function extractImageSource(source?: ImageSourceType): ImageSourceType;
 export declare function isSvgUri(source?: ImageSourceType): any;
 export declare function isSvg(source?: ImageSourceType): any;
 export declare function isBase64ImageContent(data: string): boolean;

package/src/utils/imageUtils.js

@@ -1,19 +1,5 @@
 import get from 'lodash/get';
 import Assets from "../assets";
-export function extractImageSource(source) {
-  const sourceUri = get(source, 'uri');
-  if (sourceUri) {
-    // Case when uri is a number (Local Assets)
-    if (typeof sourceUri === 'number') {
-      return sourceUri;
-    }
-    // Case when uri is a Base64 encoded string
-    if (typeof sourceUri === 'string' && isBase64ImageContent(sourceUri)) {
-      return source;
-    }
-  }
-  return source;
-}
 export function isSvgUri(source) {
   // @ts-expect-error
   return typeof source === 'object' && source?.uri?.endsWith?.('.svg');