Infra/assets internal new structure

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__/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');

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

@@ -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';

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

@@ -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",
+    "update-web-assets": "node scripts/assets/extract-dimensions.js"
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",

scripts/assets/extract-dimensions.js

@@ -0,0 +1,86 @@
+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.log(`Error getting dimensions for ${imagePath}:`, sizeError);
+      // Default dimensions if sizeOf fails
+      return {width: 24, height: 24};
+    }
+  } catch (error) {
+    console.log(`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, 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!');

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;
   }
 });

src/assets/internal/icons/index.js

@@ -0,0 +1,50 @@
+export const icons = {
+  get check() {
+    return require('./check.png');
+  },
+  get checkMarkSmall() {
+    return require('./checkMarkSmall.png');
+  },
+  get checkSmall() {
+    return require('./checkSmall.png');
+  },
+  get chevronDown() {
+    return require('./chevronDown.png');
+  },
+  get exclamationSmall() {
+    return require('./exclamationSmall.png');
+  },
+  get minusOutline() {
+    return require('./minusOutline.png');
+  },
+  get minusOutlineSmall() {
+    return require('./minusOutlineSmall.png');
+  },
+  get minusSmall() {
+    return require('./minusSmall.png');
+  },
+  get plusOutline() {
+    return require('./plusOutline.png');
+  },
+  get plusOutlineSmall() {
+    return require('./plusOutlineSmall.png');
+  },
+  get plusSmall() {
+    return require('./plusSmall.png');
+  },
+  get search() {
+    return require('./search.png');
+  },
+  get x() {
+    return require('./x.png');
+  },
+  get xFlat() {
+    return require('./xFlat.png');
+  },
+  get xMedium() {
+    return require('./xMedium.png');
+  },
+  get xSmall() {
+    return require('./xSmall.png');
+  }
+};