react-native-ui-lib 7.39.0-snapshot.6522 → 7.39.0-snapshot.6530

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6522",
+  "version": "7.39.0-snapshot.6530",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -14,6 +14,7 @@
     "url": "https://github.com/wix/react-native-ui-lib"
   },
   "scripts": {
+    "update-web-assets": "node scripts/assets/extract-dimensions.ts",
     "start": "watchman watch-del-all && react-native start",
     "start:web": "npm --prefix webDemo run start",
     "ios": "react-native run-ios",
@@ -83,6 +84,7 @@
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/jest": "^29.2.1",
     "@types/lodash": "^4.0.0",
+    "@types/mime-types": "^2.1.4",
     "@types/prop-types": "^15.5.3",
     "@types/react": "18.3.7",
     "@types/react-native": "0.73.0",
@@ -100,9 +102,11 @@
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.0.4",
     "eslint-plugin-react-native": "^4.0.0",
+    "image-size": "^2.0.1",
     "jest": "^29.6.3",
     "light-date": "^1.2.0",
     "metro-react-native-babel-preset": "0.73.10",
+    "mime-types": "^2.1.35",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
     "postcss": "^8.4.21",

package/scripts/docs/buildDocsCommon.js

@@ -88,13 +88,13 @@ 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`;
-    // }
+    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`;
+    }
 
     let dirPath;
     switch (component.category) {

package/src/assets/index.js

@@ -1,12 +1,9 @@
 import { Assets } from "./Assets";
 export default new Assets().loadAssetsGroup('', {
-  get icons() {
-    return require("./icons").icons;
-  },
   get emojis() {
     return require("./emojis").emojis;
   },
-  get images() {
-    return require("./images").images;
+  get internal() {
+    return require("./internal").internal;
   }
 });

package/src/assets/index.web.d.ts

@@ -0,0 +1,3 @@
+import { Assets } from './Assets';
+declare const _default: Assets;
+export default _default;

package/src/assets/index.web.js

@@ -0,0 +1,9 @@
+import { Assets } from "./Assets";
+export default new Assets().loadAssetsGroup('', {
+  get emojis() {
+    return require("./emojis").emojis;
+  },
+  get internal() {
+    return require("./internal").internal;
+  }
+});

package/src/assets/{icons → internal/icons}/index.js

@@ -2,8 +2,17 @@ export const icons = {
   get check() {
     return require('./check.png');
   },
+  get checkMarkSmall() {
+    return require('./checkMarkSmall.png');
+  },
   get checkSmall() {
-    return require('./check-small.png');
+    return require('./checkSmall.png');
+  },
+  get chevronDown() {
+    return require('./chevronDown.png');
+  },
+  get exclamationSmall() {
+    return require('./exclamationSmall.png');
   },
   get minusSmall() {
     return require('./minusSmall.png');
@@ -17,10 +26,13 @@ export const icons = {
   get x() {
     return require('./x.png');
   },
+  get xFlat() {
+    return require('./xFlat.png');
+  },
   get xMedium() {
     return require('./xMedium.png');
   },
-  get xFlat() {
-    return require('./xFlat.png');
+  get xSmall() {
+    return require('./xSmall.png');
   }
 };

package/src/assets/internal/icons/index.web.d.ts

@@ -0,0 +1,107 @@
+export declare const icons: {
+    readonly checkSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly check: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly checkMarkSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly dropdown: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly exclamationSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly hintTipMiddle: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly hintTipSide: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly minusSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly plusSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly search: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly transparentSwatch: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly x: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly xFlat: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly xMedium: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly xSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+};

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

@@ -0,0 +1,137 @@
+export const icons = {
+  get checkSmall() {
+    return {
+      uri: require("./check-small.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get check() {
+    return {
+      uri: require("./check.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get checkMarkSmall() {
+    return {
+      uri: require("./checkMarkSmall.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get dropdown() {
+    return {
+      uri: require("./dropdown.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get exclamationSmall() {
+    return {
+      uri: require("./exclamationSmall.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get hintTipMiddle() {
+    return {
+      uri: require("./hintTipMiddle.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get hintTipSide() {
+    return {
+      uri: require("./hintTipSide.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get minusSmall() {
+    return {
+      uri: require("./minusSmall.png"),
+      dimensions: {
+        width: 16,
+        height: 16
+      }
+    };
+  },
+  get plusSmall() {
+    return {
+      uri: require("./plusSmall.png"),
+      dimensions: {
+        width: 16,
+        height: 16
+      }
+    };
+  },
+  get search() {
+    return {
+      uri: require("./search.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get transparentSwatch() {
+    return {
+      uri: require("./transparentSwatch.png"),
+      dimensions: {
+        width: 20,
+        height: 20
+      }
+    };
+  },
+  get x() {
+    return {
+      uri: require("./x.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get xFlat() {
+    return {
+      uri: require("./xFlat.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get xMedium() {
+    return {
+      uri: require("./xMedium.png"),
+      dimensions: {
+        width: 20,
+        height: 20
+      }
+    };
+  },
+  get xSmall() {
+    return {
+      uri: require("./xSmall.png"),
+      dimensions: {
+        width: 16,
+        height: 16
+      }
+    };
+  }
+};

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

@@ -0,0 +1,26 @@
+export const images = {
+  get gradient() {
+    return require('./gradient.png');
+  },
+  get gradientOverlay() {
+    return require('./gradientOverlay.png');
+  },
+  get gradientOverlayHigh() {
+    return require('./gradientOverlayHigh.png');
+  },
+  get gradientOverlayLow() {
+    return require('./gradientOverlayLow.png');
+  },
+  get gradientOverlayMedium() {
+    return require('./gradientOverlayMedium.png');
+  },
+  get hintTipMiddle() {
+    return require('./hintTipMiddle.png');
+  },
+  get hintTipSide() {
+    return require('./hintTipSide.png');
+  },
+  get transparentSwatch() {
+    return require('./transparentSwatch.png');
+  }
+};

package/src/assets/internal/images/index.web.d.ts

@@ -0,0 +1,37 @@
+export declare const images: {
+    readonly gradient: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly gradientOverlay: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly gradientOverlayHigh: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly gradientOverlayLow: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly gradientOverlayMedium: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+};

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

@@ -0,0 +1,47 @@
+export const images = {
+  get gradient() {
+    return {
+      uri: require("./gradient.png"),
+      dimensions: {
+        width: 1,
+        height: 24
+      }
+    };
+  },
+  get gradientOverlay() {
+    return {
+      uri: require("./gradientOverlay.png"),
+      dimensions: {
+        width: 1,
+        height: 50
+      }
+    };
+  },
+  get gradientOverlayHigh() {
+    return {
+      uri: require("./gradientOverlayHigh.png"),
+      dimensions: {
+        width: 1,
+        height: 100
+      }
+    };
+  },
+  get gradientOverlayLow() {
+    return {
+      uri: require("./gradientOverlayLow.png"),
+      dimensions: {
+        width: 1,
+        height: 25
+      }
+    };
+  },
+  get gradientOverlayMedium() {
+    return {
+      uri: require("./gradientOverlayMedium.png"),
+      dimensions: {
+        width: 1,
+        height: 75
+      }
+    };
+  }
+};

package/src/assets/internal/index.d.ts

@@ -0,0 +1,4 @@
+export declare const internal: {
+    readonly icons: any;
+    readonly images: any;
+};

package/src/assets/internal/index.js

@@ -0,0 +1,8 @@
+export const internal = {
+  get icons() {
+    return require("./icons").icons;
+  },
+  get images() {
+    return require("./images").images;
+  }
+};

package/src/assets/internal/index.web.d.ts

@@ -0,0 +1,4 @@
+export declare const internal: {
+    readonly icons: any;
+    readonly images: any;
+};

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

@@ -0,0 +1,8 @@
+export const internal = {
+  get icons() {
+    return require("./icons").icons;
+  },
+  get images() {
+    return require("./images").images;
+  }
+};

package/src/components/card/index.js

@@ -22,7 +22,7 @@ const DEFAULT_SELECTION_PROPS = {
   borderWidth: 2,
   color: Colors.$backgroundPrimaryHeavy,
   indicatorSize: 20,
-  icon: Assets.icons.checkSmall,
+  icon: Assets.internal.icons.checkSmall,
   iconColor: Colors.$iconDefaultLight,
   hideIndicator: false
 };

package/src/components/checkbox/index.js

@@ -167,7 +167,7 @@ class Checkbox extends Component {
         }]}>
             <AnimatedIcon style={[this.styles.selectedIcon, {
             transform: this.animationStyle.transform
-          }]} source={indeterminate ? Assets.icons.minusSmall : selectedIcon || Assets.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
+          }]} source={indeterminate ? Assets.internal.icons.minusSmall : selectedIcon || Assets.internal.icons.checkSmall} testID={`${testID}.selected`} tintColor={this.getTintColor()} />
           </Animated.View>}
       </TouchableOpacity>
     );

package/src/components/chip/index.js

@@ -27,7 +27,7 @@ const Chip = ({
   containerStyle,
   onDismiss,
   dismissColor = Colors.$iconDefault,
-  dismissIcon = Assets.icons.x,
+  dismissIcon = Assets.internal.icons.x,
   dismissIconStyle,
   dismissContainerStyle,
   iconProps,

package/src/components/chipsInput/index.js

@@ -5,8 +5,8 @@ import { StyleSheet } from 'react-native';
 import { Constants } from "../../commons/new";
 import { useCombinedRefs, useDidUpdate } from "../../hooks";
 import TextField from "../textField";
+import Assets from "../../assets";
 import Chip from "../chip";
-const removeIcon = require("./assets/xSmall.png");
 export let ChipsInputChangeReason = /*#__PURE__*/function (ChipsInputChangeReason) {
   ChipsInputChangeReason["Added"] = "added";
   ChipsInputChangeReason["Removed"] = "removed";
@@ -85,7 +85,7 @@ const ChipsInput = forwardRef((props, refToForward) => {
     return <Chip key={index} customValue={index}
     // resetSpacings
     // paddingH-s2
-    marginR-s2 marginB-s2 dismissIcon={removeIcon} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
+    marginR-s2 marginB-s2 dismissIcon={Assets.internal.icons.xSmall} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
   };
   const chipList = useMemo(() => {
     return <>

package/src/components/colorPicker/ColorPickerDialogHeader.js

@@ -16,10 +16,10 @@ const ColorPickerDialogHeader = props => {
     onDonePressed
   } = props;
   return <View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>
-      <Button link iconSource={Assets.icons.x} iconStyle={{
+      <Button link iconSource={Assets.internal.icons.x} iconStyle={{
       tintColor: Colors.$iconDefault
     }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} />
-      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
+      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.internal.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
     </View>;
 };
 export default ColorPickerDialogHeader;

package/src/components/colorPicker/index.js

@@ -42,7 +42,7 @@ const ColorPicker = props => {
       <View style={[styles.buttonContainer, {
       backgroundColor
     }]}>
-        <Button color={Colors.$textDefault} outlineColor={Colors.$textDefault} style={styles.button} round outline iconSource={Assets.icons.plusSmall} onPress={showDialog} testID={`${testID}-button`} accessibilityLabel={accessibilityLabels?.addButton} />
+        <Button color={Colors.$textDefault} outlineColor={Colors.$textDefault} style={styles.button} round outline iconSource={Assets.internal.icons.plusSmall} onPress={showDialog} testID={`${testID}-button`} accessibilityLabel={accessibilityLabels?.addButton} />
       </View>
       <ColorPickerDialog {...props} key={initialColor} visible={show} onDismiss={hideDialog} accessibilityLabels={{
       dismissButton: accessibilityLabels?.dismissButton,

package/src/components/colorSwatch/index.js

@@ -6,7 +6,6 @@ import { asBaseComponent, Constants } from "../../commons/new";
 import View from "../view";
 import TouchableOpacity from "../touchableOpacity";
 import Image from "../image";
-const transparentImage = require("./assets/transparentSwatch/TransparentSwatch.png");
 const DEFAULT_SIZE = Constants.isTablet ? 44 : 36;
 export const SWATCH_MARGIN = 12;
 export const SWATCH_SIZE = DEFAULT_SIZE;
@@ -141,10 +140,10 @@ class ColorSwatch extends PureComponent {
       height: size,
       borderRadius: size / 2
     }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
-        {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
+        {Colors.isTransparent(this.color) && <Image source={Assets.internal.icons.transparentSwatch} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
-      }]} /> : <Animated.Image source={Assets.icons.check} style={{
+      }]} /> : <Animated.Image source={Assets.internal.icons.check} style={{
         tintColor,
         opacity: isSelected,
         transform: [{

package/src/components/dateTimePicker/index.js

@@ -137,10 +137,10 @@ const DateTimePicker = forwardRef((props, ref) => {
   }, [onDonePressed, toggleExpandableOverlay]);
   const renderHeader = () => {
     return <View row spread bg-$backgroundDefault backgroundColor={backgroundColor} paddingH-20 style={[styles.header, headerStyle]} testID={`${testID}.header`}>
-        <Button link iconSource={Assets.icons.x} iconStyle={{
+        <Button link iconSource={Assets.internal.icons.x} iconStyle={{
         tintColor: Colors.$iconDefault
       }} testID={`${testID}.cancel`} {...cancelButtonProps} onPress={toggleExpandableOverlay} />
-        <Button link iconSource={Assets.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
+        <Button link iconSource={Assets.internal.icons.check} testID={`${testID}.done`} {...confirmButtonProps} onPress={onDonePressed} />
       </View>;
   };
   const renderDateTimePicker = useCallback(() => {

package/src/components/hint/index.js

@@ -6,6 +6,7 @@ import View from "../view";
 import Image from "../image";
 import Modal from "../modal";
 import TouchableOpacity from "../touchableOpacity";
+import Assets from "../../assets";
 import { HintPositions, HintProps, TargetAlignments } from "./types";
 import useHintVisibility from "./hooks/useHintVisibility";
 import useHintLayout from "./hooks/useHintLayout";
@@ -14,8 +15,6 @@ import useHintPosition from "./hooks/useHintPosition";
 import HintMockChildren from "./HintMockChildren";
 import HintAnchor from "./HintAnchor";
 import HintBubble from "./HintBubble";
-const sideTip = require("./assets/hintTipSide.png");
-const middleTip = require("./assets/hintTipMiddle.png");
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
@@ -125,7 +124,7 @@ const Hint = props => {
     }
   };
   const renderHintTip = () => {
-    const source = useSideTip ? sideTip : middleTip;
+    const source = useSideTip ? Assets.internal.images.hintTipSide : Assets.internal.images.hintTipMiddle;
     const flipVertically = position === HintPositions.TOP;
     const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
     const flipStyle = {

package/src/components/image/index.js

@@ -156,7 +156,7 @@ class Image extends PureComponent {
     } = modifiers;
     return (
       // @ts-ignore
-      <ImageView style={[tintColor && {
+      <ImageView style={[Constants.isWeb && source?.dimensions, tintColor && {
         tintColor
       }, shouldFlipRTL && styles.rtlFlipped, width && {
         width

package/src/components/modal/TopBar.js

@@ -21,7 +21,7 @@ class TopBar extends Component {
   static displayName = 'Modal.TopBar';
   static defaultProps = {
     doneLabel: 'Save',
-    cancelIcon: Assets.icons.x,
+    cancelIcon: Assets.internal.icons.x,
     doneButtonProps: {},
     cancelButtonProps: {},
     includeStatusBar: Constants.isIOS

package/src/components/modal/api/modalTopBar.api.json

@@ -29,7 +29,7 @@
       "name": "cancelIcon",
       "type": "ImageSource",
       "description": "Cancel action icon",
-      "default": "Assets.icons.x"
+      "default": "Assets.internal.icons.x"
     },
     {"name": "onCancel", "type": "(props?: any) => void", "description": "Cancel action callback"},
     {