Revert formatting changes in multiple components

demo/src/configurations.js

@@ -16,7 +16,10 @@ export const loadDemoConfigurations = () => {
     settings: require('./assets/icons/settings.png'),
     share: require('./assets/icons/share.png'),
     info: require('./assets/icons/info.png'),
-    exclamation: require('./assets/icons/exclamationFillSmall.png')
+    exclamation: require('./assets/icons/exclamationFillSmall.png'),
+    check: require('./assets/icons/check.png'),
+    x: require('./assets/icons/x.png'),
+    minus: require('./assets/icons/minusSmall.png')
   });
 
   Assets.loadAssetsGroup('images.demo', {

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,
               {

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

@@ -3933,7 +3933,7 @@ exports[`TextField Screen renders screen 1`] = `
                 accessible={false}
                 source={
                   {
-                    "testUri": "../../../src/assets/icons/xFlat.png",
+                    "testUri": "../../../src/assets/internal/icons/xFlat.png",
                   }
                 }
                 style={

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -51,7 +51,7 @@ export default class CheckboxScreen extends Component {
             borderRadius={2}
             size={30}
             color={Colors.purple30}
-            selectedIcon={Assets.icons.x}
+            selectedIcon={Assets.icons.demo.x}
             marginL-s5
           />
 

demo/src/screens/componentScreens/IconScreen.tsx

@@ -24,7 +24,7 @@ const IconScreen = () => {
         <Icon
           size={customSize ? size : undefined}
           tintColor={customColor ? (color as string) : undefined}
-          source={Assets.icons.search}
+          source={Assets.icons.demo.search}
           badgeProps={
             useBadge
               ? {

demo/src/screens/componentScreens/ModalScreen.tsx

@@ -123,7 +123,7 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
               ]}
               leftButtons={[
                 {
-                  icon: Assets.icons.x,
+                  icon: Assets.icons.demo.x,
                   onPress: () => Alert.alert('back'),
                   buttonProps: {hitSlop: BUTTONS_HIT_SLOP, iconStyle: {tintColor: Colors.yellow10}}
                 }

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -44,7 +44,7 @@ const renderContact = (contactValue: any, props: any) => {
           {contact?.name}
         </Text>
       </View>
-      {props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
+      {props.isSelected && <Icon source={Assets.icons.demo.check} tintColor={Colors.$iconDefault}/>}
     </View>
   );
 };

demo/src/screens/componentScreens/RadioButtonScreen.js

@@ -102,8 +102,8 @@ export default class RadioButtonScreen extends Component {
               Yes or No?
             </Text>
             <View row>
-              {this.renderRadioButtonWithImage('yes', Assets.icons.check, {tintColor: 'green'})}
-              {this.renderRadioButtonWithImage('no', Assets.icons.x, {tintColor: 'red'})}
+              {this.renderRadioButtonWithImage('yes', Assets.icons.demo.check, {tintColor: 'green'})}
+              {this.renderRadioButtonWithImage('no', Assets.icons.demo.x, {tintColor: 'red'})}
             </View>
             <Text marginT-10>You chose: {this.state.value}</Text>
           </RadioGroup>

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -1,14 +1,24 @@
 import React, {useCallback, useState} from 'react';
 import {StyleSheet} from 'react-native';
-import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography, SegmentedControlItemProps} from 'react-native-ui-lib';
+import {
+  Text,
+  View,
+  Colors,
+  SegmentedControl,
+  Assets,
+  Spacings,
+  BorderRadiuses,
+  Typography,
+  SegmentedControlItemProps
+} from 'react-native-ui-lib';
 
 const segments: Record<string, Array<SegmentedControlItemProps>> = {
   first: [{label: 'Default'}, {label: 'Form'}],
   second: [{label: '1'}, {label: '2'}, {label: '3'}, {label: Assets.emojis.airplane}, {label: '5'}],
   third: [
     {
       label: 'Very Long Label with icon',
-      iconSource: Assets.icons.search,
+      iconSource: Assets.icons.demo.search,
       iconStyle: {marginLeft: Spacings.s1, width: 16, height: 16},
       iconOnRight: true
     },
@@ -18,7 +28,11 @@ const segments: Record<string, Array<SegmentedControlItemProps>> = {
   fifth: [{label: 'Full'}, {label: 'Width'}],
   sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
   seventh: [{label: '$'}, {label: '%'}],
-  eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}],
+  eighth: [
+    {label: 'Plus', iconSource: Assets.icons.demo.plus},
+    {label: 'Minus', iconSource: Assets.icons.demo.minus},
+    {label: 'Check', iconSource: Assets.icons.demo.check}
+  ],
   ninth: [{label: 'with'}, {label: 'a'}, {label: 'label'}]
 };
 
@@ -72,7 +86,9 @@ const SegmentedControlScreen = () => {
           segmentLabelStyle={styles.customTypography}
           preset={screenPreset}
         />
-        <Text center marginT-s4>With Icons</Text>
+        <Text center marginT-s4>
+          With Icons
+        </Text>
         <SegmentedControl segments={segments.eighth} preset={screenPreset}/>
         <Text marginT-s4 center>
           Custom Styling

demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx

@@ -24,7 +24,7 @@ class Tab1 extends Component {
             round
             style={{width: 50}}
             size={Button.sizes.small}
-            iconSource={Assets.icons.search}
+            iconSource={Assets.icons.demo.search}
             white
           />
         </View>

demo/src/screens/componentScreens/ToastsScreen.js

@@ -108,7 +108,7 @@ export default class ToastsScreen extends Component {
           onDismiss={this.dismissTopToast}
           // autoDismiss={3000}
           showDismiss={showDismiss}
-          // action={{iconSource: Assets.icons.x, onPress: () => console.log('dismiss')}}
+          // action={{iconSource: Assets.icons.demo.x, onPress: () => console.log('dismiss')}}
           showLoader={showLoader}
         />
         <Toast

demo/src/screens/realExamples/ListActions/ActionsList.js

@@ -197,7 +197,7 @@ export default class ActionsList extends Component {
               size={'xSmall'}
               round
               backgroundColor="transparent"
-              iconSource={Assets.icons.x}
+              iconSource={Assets.icons.demo.x}
               iconStyle={{tintColor: Colors.white}}
               onPress={() => {
                 // console.warn('dismiss press');

expoDemo/MainScreen.tsx

@@ -83,7 +83,7 @@ export default function MainScreen({navigation}) {
             preset={null}
             text70
             fieldStyle={styles.fieldStyle}
-            leadingAccessory={<Icon source={Assets.icons.search} marginH-s2/>}
+            leadingAccessory={<Icon source={Assets.internal.icons.search} marginH-s2/>}
           />
         }
         sections={sections}

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/index.ts

@@ -1,13 +1,10 @@
 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;
   }
 });