feat: Fix formatting issues, add image-size dependency and asset update script

demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

@@ -937,6 +937,7 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              false,
               undefined,
               undefined,
               {
@@ -1194,6 +1195,7 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              false,
               undefined,
               undefined,
               {
@@ -1465,6 +1467,7 @@ exports[`AvatarScreen renders screen 1`] = `
             }
             style={
               [
+                false,
                 undefined,
                 undefined,
                 {
@@ -1659,6 +1662,7 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              false,
               undefined,
               undefined,
               {
@@ -1916,6 +1920,7 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              false,
               undefined,
               undefined,
               {
@@ -2046,6 +2051,7 @@ exports[`AvatarScreen renders screen 1`] = `
               }
               style={
                 [
+                  false,
                   null,
                   undefined,
                   undefined,
@@ -2218,6 +2224,7 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              false,
               undefined,
               undefined,
               {
@@ -2448,6 +2455,7 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              false,
               undefined,
               undefined,
               {
@@ -2678,6 +2686,7 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              false,
               undefined,
               undefined,
               {
@@ -2866,6 +2875,7 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              false,
               undefined,
               undefined,
               {

package.json

@@ -14,6 +14,7 @@
     "url": "https://github.com/wix/react-native-ui-lib"
   },
   "scripts": {
+    "update-web-assets": "node scripts/assets/extract-dimensions.js",
     "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",

scripts/assets/extract-dimensions.js

@@ -0,0 +1,85 @@
+const fs = require('fs');
+const path = require('path');
+const mime = require('mime-types');
+const {imageSize: sizeOf} = require('image-size');
+
+// Base paths
+const ICONS_PATH = path.resolve(__dirname, '../../src/assets/internal/icons');
+const IMAGES_PATH = path.resolve(__dirname, '../../src/assets/internal/images');
+
+// Function to check if file is an image
+function isImageFile(filePath) {
+  const mimeType = mime.lookup(filePath);
+  return !!mimeType && mimeType.includes('image');
+}
+
+// Function to get dimensions of an image
+function getDimensions(imagePath) {
+  try {
+    if (!isImageFile(imagePath)) {
+      console.warn(`File is not an image: ${imagePath}`);
+      return {width: 0, height: 0};
+    }
+
+    try {
+      const buffer = fs.readFileSync(imagePath);
+      const dimensions = sizeOf(buffer);
+      return {
+        width: dimensions.width,
+        height: dimensions.height
+      };
+    } catch (sizeError) {
+      console.error(`Error getting dimensions for ${imagePath}:`, sizeError);
+      // Default dimensions if sizeOf fails
+      return {width: 24, height: 24};
+    }
+  } catch (error) {
+    console.error(`Error getting dimensions for ${imagePath}:`, error);
+    return {width: 0, height: 0};
+  }
+}
+
+// Function to create index files with dimensions
+function createIndexFile(sourcePath, targetPath, fileType) {
+  const files = fs.readdirSync(sourcePath).filter(file => !file.includes('@') && !file.startsWith('.'));
+
+  let content = '';
+
+  if (fileType === 'icons') {
+    content = 'export const icons = {\n';
+  } else if (fileType === 'images') {
+    content = 'export const images = {\n';
+  }
+
+  files.forEach(file => {
+    const filePath = path.join(sourcePath, file);
+    const mimeType = mime.lookup(filePath);
+    const isImage = !!mimeType && mimeType.includes('image');
+
+    if (!isImage) {
+      console.warn(`Skipping non-image file: ${filePath}`);
+      return;
+    }
+
+    const name = path.basename(file, path.extname(file));
+    const dimensions = getDimensions(filePath);
+
+    // Handle hyphenated filenames by converting to camelCase
+    const propertyName = name.replace(/-([a-z])/g, (match, letter) => letter.toUpperCase());
+
+    content += `  get ${propertyName}() {\n`;
+    content += `    return {uri: require('./${file}'), dimensions: {width: ${dimensions.width}, height: ${dimensions.height}}};\n`;
+    content += `  },\n`;
+  });
+
+  content += '};\n';
+
+  fs.writeFileSync(targetPath, content);
+  console.log(`Created ${targetPath}`);
+}
+
+// Create index files
+createIndexFile(ICONS_PATH, path.join(ICONS_PATH, 'index.ts'), 'icons');
+createIndexFile(IMAGES_PATH, path.join(IMAGES_PATH, 'index.ts'), 'images');
+
+console.log('Index files created successfully!');

src/assets/internal/icons/index.ts

@@ -0,0 +1,38 @@
+export const icons = {
+  get check() {
+    return {uri: require('./check.png'), dimensions: {width: 21, height: 15}};
+  },
+  get checkMarkSmall() {
+    return {uri: require('./checkMarkSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get checkSmall() {
+    return {uri: require('./checkSmall.png'), dimensions: {width: 24, height: 24}};
+  },
+  get chevronDown() {
+    return {uri: require('./chevronDown.png'), dimensions: {width: 16, height: 16}};
+  },
+  get exclamationSmall() {
+    return {uri: require('./exclamationSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  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 x() {
+    return {uri: require('./x.png'), dimensions: {width: 17, height: 16}};
+  },
+  get xFlat() {
+    return {uri: require('./xFlat.png'), dimensions: {width: 16, height: 16}};
+  },
+  get xMedium() {
+    return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}};
+  },
+  get xSmall() {
+    return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+};

src/assets/internal/images/index.ts

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

src/components/animatedImage/index.tsx

@@ -51,18 +51,16 @@ const AnimatedImage = (props: AnimatedImageProps) => {
     }
   }, [loader]);
 
-  const onLoad = useCallback(
-    (event: NativeSyntheticEvent<ImageLoadEventData>) => {
-      setIsLoading(false);
-      propsOnLoad?.(event);
-      // did not start the animation already
-      if (opacity.value === 0) {
-        opacity.value = withTiming(1, {duration: animationDuration});
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setIsLoading, propsOnLoad, animationDuration]
-  );
+  const onLoad = useCallback((event: NativeSyntheticEvent<ImageLoadEventData>) => {
+    setIsLoading(false);
+    propsOnLoad?.(event);
+    // did not start the animation already
+    if (opacity.value === 0) {
+      opacity.value = withTiming(1, {duration: animationDuration});
+    }
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [setIsLoading, propsOnLoad, animationDuration]);
 
   const onLoadStart = useCallback(() => {
     setIsLoading(true);

src/components/checkbox/__tests__/index.spec.tsx

@@ -42,8 +42,7 @@ describe('Checkbox renderer test', () => {
       checkboxInitialValue | checkboxExpectedValue
       ${false}             | ${true}
       ${true}              | ${false}
-    `(
-      'Send value ($checkboxInitialValue)',
+    `('Send value ($checkboxInitialValue)',
       async ({
         checkboxInitialValue,
         checkboxExpectedValue
@@ -59,8 +58,7 @@ describe('Checkbox renderer test', () => {
 
         expect(onValueChange).toHaveBeenCalledTimes(1);
         expect(onValueChange).toHaveBeenCalledWith(checkboxExpectedValue);
-      }
-    );
+      });
   });
 
   describe('Press', () => {

src/components/featureHighlight/index.tsx

@@ -222,8 +222,7 @@ class FeatureHighlight extends Component<FeatureHighlightProps, State> {
         toValue, // Animate to value
         duration: toValue ? 100 : 0, // Make it take a while
         useNativeDriver: true
-      }
-    ).start(); // Starts the animation
+      }).start(); // Starts the animation
   }
 
   setTargetPosition(props = this.props) {
@@ -259,9 +258,7 @@ class FeatureHighlight extends Component<FeatureHighlightProps, State> {
       topPosition = isUnderMin ? topPosition + innerPadding : targetCenter + minRectHeight / 2 + innerPadding / 2;
     }
     if (topPosition < 0 || topPosition + this.contentHeight > Constants.screenHeight) {
-      console.warn(
-        `Content is too long and might appear off screen. Please adjust the message length for better results.`
-      );
+      console.warn(`Content is too long and might appear off screen. Please adjust the message length for better results.`);
     }
     return topPosition;
   }

src/components/hint/__tests__/__snapshots__/index.spec.tsx.snap

@@ -240,6 +240,7 @@ exports[`Hint Screen component test Different positions and scenarios center pos
         }
         style={
           [
+            false,
             {
               "tintColor": "#5A48F5",
             },
@@ -518,6 +519,7 @@ exports[`Hint Screen component test Different positions and scenarios center pos
         }
         style={
           [
+            false,
             {
               "tintColor": "#5A48F5",
             },
@@ -797,6 +799,7 @@ exports[`Hint Screen component test Different positions and scenarios left posit
         }
         style={
           [
+            false,
             {
               "tintColor": "#5A48F5",
             },
@@ -1075,6 +1078,7 @@ exports[`Hint Screen component test Different positions and scenarios left posit
         }
         style={
           [
+            false,
             {
               "tintColor": "#5A48F5",
             },
@@ -1354,6 +1358,7 @@ exports[`Hint Screen component test Different positions and scenarios right posi
         }
         style={
           [
+            false,
             {
               "tintColor": "#5A48F5",
             },
@@ -1632,6 +1637,7 @@ exports[`Hint Screen component test Different positions and scenarios right posi
         }
         style={
           [
+            false,
             {
               "tintColor": "#5A48F5",
             },

src/components/image/index.tsx

@@ -244,6 +244,7 @@ class Image extends PureComponent<Props, State> {
       // @ts-ignore
       <ImageView
         style={[
+          Constants.isWeb && source?.dimensions,
           tintColor && {tintColor},
           shouldFlipRTL && styles.rtlFlipped,
           width && {width},