Infra/assets internal new structure (#3635)

* Add internal assets module with icons and images

* Refactor icon imports to use internal assets for consistency

* Refactor asset imports to use internal structure and remove assets.icons/images

* Add xSmall icon and update ChipsInput to use internal assets

* Add transparentSwatch icon and update ColorSwatch component to use it

* Add dropdown to icons and update useFieldType to utilize internal assets

* Add hintTip icons and update Hint component to use internal assets

* Add checkMarkSmall and exclamationSmall icons, update WizardStates to use internal assets

* Add gradient overlay images and update Overlay component to use internal assets

* Add gradientOverlay image and update ScrollBar component to use it

* move hint, swatch assets to internal.images

* Rename icons.dropdown to icons.chevronDown

* Add icons.demo and update references in components screens

* rename checkSmall icon file and update icons - index.js reference

* Update ColorSwatch to use internal.images for transparentSwatch

* Refactor icon and image exports to include URI and dimensions

* Refactor image handling to extract image source and apply dimensions in Icon and Image components

* Update snapshots to reflect changes in image in Avatar, TextField, Button, and Hint components

* remove unnecessary default export in check icon

* Add script to extract image dimensions and update package.json

* Revert new structure, split into index.web filesÏ

* Icon remove DEFAULT_WEB_ICON_SIZE

* Stepper local assets remove, move to Assets

* Add new icon variants: minusOutline, minusOutlineSmall, plusOutline, plusOutlineSmall

* Update asset imports to use .default for images and icons

* Remove esModule option from url-loader configuration in webpack

* Remove docuilib configurations from ReactLiveScope

* Bump version to 3.14.0 in package.json

* Refactor icon asset loading to use the new web assets structure

* Rename update-web-assets script to updateWebAssets in package.json

* changed extract-dimensions script to use console.error

* Update file filtering in createIndexFile to exclude sized assets

* rename extract-dimensions script

Author: adids1221

docuilib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilib-docs",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "main": "./src/index.ts",
   "scripts": {
     "docusaurus": "docusaurus",

docuilib/src/theme/ReactLiveScope/configurations.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import products from '../../assets/data/products';
-require('./configurations');
 import {Colors} from 'react-native-ui-lib/style';
 import {BorderRadiuses, Button, Image, Spacings, Text, TouchableOpacity, View} from 'react-native-ui-lib/core';
 import ActionBar from 'react-native-ui-lib/actionBar';
@@ -34,16 +33,18 @@ import * as Playground from './Playground';
 Assets.loadAssetsGroup('icons.demo', {
   // chevronDown: require('../../assets/icons/chevronDown.png').default,
   chevronRight: {
-    source: require('../../assets/icons/chevronRight.png').default,
-    style: {width: 24, height: 24}
+    uri: require('../../assets/icons/chevronRight.png').default,
+    width: 24,
+    height: 24
   },
   // add: require('../../assets/icons/add.png').default,
   // camera: require('../../assets/icons/cameraSelected.png').default,
   // close: require('../../assets/icons/close.png').default,
   // dashboard: require('../../assets/icons/dashboard.png').default,
   drag: {
-    source: require('../../assets/icons/drag.png').default,
-    style: {width: 10, height: 16}
+    uri: require('../../assets/icons/drag.png').default,
+    width: 10,
+    height: 16
   }
   // image: require('../../assets/icons/image.png').default,
   // plus: require('../../assets/icons/plus.png').default,

docuilib/src/theme/ReactLiveScope/index.js

@@ -39,7 +39,8 @@
     "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",
+    "updateWebAssets": "node scripts/assets/extractDimensions.js"
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",

package.json

@@ -0,0 +1,88 @@
+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) {
+      // eslint-disable-next-line no-restricted-syntax
+      console.error(`Error getting dimensions for ${imagePath}:`, sizeError);
+      // Default dimensions if sizeOf fails
+      return {width: 24, height: 24};
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-restricted-syntax
+    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('@'));
+
+  let content = '';
+
+  if (fileType === 'icons') {
+    content = 'export const icons = {\n';
+  } else if (fileType === 'images') {
+    content = 'export const images = {\n';
+  }
+
+  files.forEach((file, index) => {
+    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`;
+    // eslint-disable-next-line max-len
+    content += `    return {uri: require('./${file}').default, width: ${dimensions.width}, height: ${dimensions.height}};\n`;
+    content += index === files.length - 1 ? `  }\n` : `  },\n`; // Conditional check for the last file
+  });
+
+  content += '};\n';
+
+  fs.writeFileSync(targetPath, content);
+  console.log(`Created ${targetPath}`);
+}
+
+// Create index files
+createIndexFile(ICONS_PATH, path.join(ICONS_PATH, 'index.web.js'), 'icons');
+createIndexFile(IMAGES_PATH, path.join(IMAGES_PATH, 'index.web.js'), 'images');
+
+console.log('Index files created successfully!');

scripts/assets/extractDimensions.js

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

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

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

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

@@ -47,11 +47,9 @@ export type IconProps = Omit<RNImageProps, 'source' | 'tintColor'> &
 
 type Props = IconProps & BaseComponentInjectedProps;
 
-const DEFAULT_WEB_ICON_SIZE = 16;
-
 const Icon = forwardRef((props: Props, ref: any) => {
   const {
-    size = Constants.isWeb ? DEFAULT_WEB_ICON_SIZE : undefined,
+    size,
     tintColor,
     style,
     supportRTL,
@@ -86,17 +84,19 @@ const Icon = forwardRef((props: Props, ref: any) => {
     return source;
   }, [source, assetGroup, assetName]);
 
-  const renderImage = () => (
-    <Image
-      accessible={false}
-      accessibilityRole={'image'}
-      fsTagName={recorderTag}
-      {...others}
-      ref={ref}
-      source={iconSource}
-      style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {tintColor}, style]}
-    />
-  );
+  const renderImage = () => {
+    return (
+      <Image
+        accessible={false}
+        accessibilityRole={'image'}
+        fsTagName={recorderTag}
+        {...others}
+        ref={ref}
+        source={iconSource}
+        style={[margins, iconSize, shouldFlipRTL && styles.rtlFlipped, !!tintColor && {tintColor}, style]}
+      />
+    );
+  };
 
   const renderSvg = () => <SvgImage fsTagName={recorderTag} data={source} {...iconSize} {...props}/>;
 

src/components/icon/index.tsx

@@ -43,8 +43,7 @@ const imageLoaderConfiguration = {
   use: {
     loader: 'url-loader',
     options: {
-      name: '[name].[ext]',
-      esModule: false
+      name: '[name].[ext]'
     }
   }
 };