Infra/assets internal (#3618)

* 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

* Stepper local assets remove, move to Assets

Author: adids1221

src/assets/icons/check.png renamed to demo/src/assets/icons/check.png

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

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

@@ -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={

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

@@ -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
           />
 

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

@@ -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
               ? {

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

@@ -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}}
                 }

src/assets/icons/minusSmall.png renamed to demo/src/assets/icons/minusSmall.png

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

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

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

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

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

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

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

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

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

src/assets/icons/x.png renamed to demo/src/assets/icons/x.png

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

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

@@ -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}

src/assets/icons/[email protected] renamed to demo/src/assets/icons/[email protected]

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

demo/src/configurations.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');
+  }
+};

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

@@ -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');
+  }
+};

demo/src/screens/componentScreens/CheckboxScreen.tsx

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

demo/src/screens/componentScreens/IconScreen.tsx

@@ -23,7 +23,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
 };

demo/src/screens/componentScreens/ModalScreen.tsx

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

demo/src/screens/componentScreens/PickerScreen.tsx

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

demo/src/screens/componentScreens/RadioButtonScreen.js

@@ -4,10 +4,9 @@ import {isUndefined, map} from 'lodash';
 import {Constants} from '../../commons/new';
 import {useCombinedRefs, useDidUpdate} from '../../hooks';
 import TextField, {TextFieldProps} from '../textField';
+import Assets from '../../assets';
 import Chip, {ChipProps} from '../chip';
 
-const removeIcon = require('./assets/xSmall.png');
-
 export enum ChipsInputChangeReason {
   Added = 'added',
   Removed = 'removed'
@@ -122,7 +121,7 @@ const ChipsInput = forwardRef((props: ChipsInputProps, refToForward: React.Ref<a
         // paddingH-s2
         marginR-s2
         marginB-s2
-        dismissIcon={removeIcon}
+        dismissIcon={Assets.internal.icons.xSmall}
         recorderTag={'mask'}
         {...defaultChipProps}
         {...(chip.invalid ? invalidChipProps : undefined)}

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -22,7 +22,7 @@ const ColorPickerDialogHeader = (props: HeaderProps) => {
     <View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>
       <Button
         link
-        iconSource={Assets.icons.x}
+        iconSource={Assets.internal.icons.x}
         iconStyle={{tintColor: Colors.$iconDefault}}
         onPress={onDismiss}
         accessibilityLabel={_.get(accessibilityLabels, 'dismissButton')}
@@ -32,7 +32,7 @@ const ColorPickerDialogHeader = (props: HeaderProps) => {
         color={doneButtonColor}
         disabled={!valid}
         link
-        iconSource={Assets.icons.check}
+        iconSource={Assets.internal.icons.check}
         onPress={onDonePressed}
         accessibilityLabel={_.get(accessibilityLabels, 'doneButton')}
         testID={`${testID}.dialog.done`}

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

@@ -95,7 +95,7 @@ const ColorPicker = (props: Props) => {
           style={styles.button}
           round
           outline
-          iconSource={Assets.icons.plusSmall}
+          iconSource={Assets.internal.icons.plusSmall}
           onPress={showDialog}
           testID={`${testID}-button`}
           accessibilityLabel={accessibilityLabels?.addButton}

demo/src/screens/componentScreens/ToastsScreen.js

@@ -52,7 +52,6 @@ interface Props {
 }
 export type ColorSwatchProps = Props & ColorsModifiers;
 
-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;
@@ -178,13 +177,17 @@ class ColorSwatch extends PureComponent<Props & BaseComponentInjectedProps> {
         {...this.getAccessibilityInfo()}
       >
         {Colors.isTransparent(this.color) && (
-          <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'}/>
+          <Image
+            source={Assets.internal.images.transparentSwatch}
+            style={this.styles.transparentImage}
+            resizeMode={'cover'}
+          />
         )}
         {unavailable ? (
           <View style={[this.styles.unavailable, {backgroundColor: tintColor}]}/>
         ) : (
           <Animated.Image
-            source={Assets.icons.check}
+            source={Assets.internal.icons.check}
             style={{
               tintColor,
               opacity: isSelected,