react-native-ui-lib 7.38.1-snapshot.6442 → 7.38.1-snapshot.6449

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.1-snapshot.6442",
+  "version": "7.38.1-snapshot.6449",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/scripts/docs/buildDocsCommon.js

@@ -7,7 +7,6 @@ const fs = require('fs');
 
 const COMPONENTS_DOCS_DIR = './docs/components';
 const SERVICES_DOCS_DIR = './docs/services';
-const FOUNDATION_DOCS_DIR = './docs/foundation';
 
 const VALID_COMPONENTS_CATEGORIES = [
   'foundation',
@@ -93,22 +92,14 @@ function processComponents(components) {
       content += `${buildOldDocs(component)}\n`;
     }
 
+
     let dirPath;
-    switch (component.category) {
-      case 'services': {
-        dirPath = `${SERVICES_DOCS_DIR}`;
-        break;
-      }
-      case 'foundation': {
-        dirPath = `${FOUNDATION_DOCS_DIR}`;
-        break;
-      }
-      default: {
-        const componentParentDir =
-          componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
-        dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
-        break;
-      }
+    if (component.category === 'services') {
+      dirPath = `${SERVICES_DOCS_DIR}`;
+    } else {
+      const componentParentDir =
+        componentParentName || isParentComponent ? `/${componentParentName || componentName}` : '';
+      dirPath = `${COMPONENTS_DOCS_DIR}/${component.category}${componentParentDir}`;
     }
 
     if (!fs.existsSync(dirPath)) {
@@ -193,7 +184,7 @@ function buildOldDocs(component) {
   /* Snippet */
   if (component.snippet) {
     content += `### Usage\n`;
-    content += `<UILivePreview componentName={"${component.name}"} code={\`${component.snippet
+    content += `<UILivePreview code={\`${component.snippet
       ?.map(item => _.replace(item, new RegExp(/\$[1-9]/, 'g'), ''))
       .join('\n')
       .toString()}\`}/>\n\n`;

package/src/assets/components/index.d.ts

@@ -0,0 +1,17 @@
+export declare const components: {
+    readonly outline: {
+        readonly minus: any;
+        readonly minusSmall: any;
+        readonly plus: any;
+        readonly plusSmall: any;
+    };
+    readonly arrowDown: any;
+    readonly checkMarkSmall: any;
+    readonly dropdown: any;
+    readonly exclamationSmall: any;
+    readonly hintTipMiddle: any;
+    readonly hintTipSide: any;
+    readonly minusSmall: any;
+    readonly plusSmall: any;
+    readonly transparentSwatch: any;
+};

package/src/assets/components/index.js

@@ -0,0 +1,32 @@
+export const components = {
+  get outline() {
+    return require("./outline").default;
+  },
+  get arrowDown() {
+    return require("./arrowDown.png");
+  },
+  get checkMarkSmall() {
+    return require("./checkMarkSmall.png");
+  },
+  get dropdown() {
+    return require("./dropdown.png");
+  },
+  get exclamationSmall() {
+    return require("./exclamationSmall.png");
+  },
+  get hintTipMiddle() {
+    return require("./hintTipMiddle.png");
+  },
+  get hintTipSide() {
+    return require("./hintTipSide.png");
+  },
+  get minusSmall() {
+    return require("./minusSmall.png");
+  },
+  get plusSmall() {
+    return require("./plusSmall.png");
+  },
+  get transparentSwatch() {
+    return require("./TransparentSwatch.png");
+  }
+};

package/src/assets/components/index.web.js

@@ -0,0 +1,36 @@
+const outline = require('./outline').default;
+
+const components = {
+  get outline() {
+    return outline;
+  },
+  get arrowDown() {
+    return {uri: require('./arrowDown.png'), dimensions: {width: 16, height: 16}};
+  },
+  get checkMarkSmall() {
+    return {uri: require('./checkMarkSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get dropdown() {
+    return {uri: require('./dropdown.png'), dimensions: {width: 16, height: 16}};
+  },
+  get exclamationSmall() {
+    return {uri: require('./exclamationSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  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 minusSmall() {
+    return {uri: require('./minusSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get plusSmall() {
+    return {uri: require('./plusSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get transparentSwatch() {
+    return {uri: require('./TransparentSwatch.png'), dimensions: {width: 100, height: 100}};
+  }
+};
+
+module.exports = components;

package/src/assets/components/outline/index.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    readonly minus: any;
+    readonly minusSmall: any;
+    readonly plus: any;
+    readonly plusSmall: any;
+};
+export default _default;

package/src/assets/components/outline/index.js

@@ -0,0 +1,14 @@
+export default {
+  get minus() {
+    return require("./minusOutline.png");
+  },
+  get minusSmall() {
+    return require("./minusOutlineSmall.png");
+  },
+  get plus() {
+    return require("./plusOutline.png");
+  },
+  get plusSmall() {
+    return require("./plusOutlineSmall.png");
+  }
+};

package/src/assets/components/outline/index.web.js

@@ -0,0 +1,14 @@
+export default {
+  get minus() {
+    return {uri: require('./minusOutline.png'), dimensions: {width: 32, height: 32}};
+  },
+  get minusSmall() {
+    return {uri: require('./minusOutlineSmall.png'), dimensions: {width: 24, height: 24}};
+  },
+  get plus() {
+    return {uri: require('./plusOutline.png'), dimensions: {width: 32, height: 32}};
+  },
+  get plusSmall() {
+    return {uri: require('./plusOutlineSmall.png'), dimensions: {width: 24, height: 24}};
+  }
+};

package/src/assets/icons/index.js

@@ -17,6 +17,9 @@ export const icons = {
   get x() {
     return require('./x.png');
   },
+  get xSmall() {
+    return require('./xSmall.png');
+  },
   get xMedium() {
     return require('./xMedium.png');
   },

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

@@ -0,0 +1,31 @@
+const icons = {
+  get check() {
+    return {uri: require('./check.png'), dimensions: {width: 21, height: 15}};
+  },
+  get checkSmall() {
+    return {uri: require('./check-small.png'), dimensions: {width: 24, height: 24}};
+  },
+  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 xSmall() {
+    return {uri: require('./xSmall.png'), dimensions: {width: 16, height: 16}};
+  },
+  get xMedium() {
+    return {uri: require('./xMedium.png'), dimensions: {width: 24, height: 24}};
+  },
+  get xFlat() {
+    return {uri: require('./xFlat.png'), dimensions: {width: 16, height: 16}};
+  }
+};
+
+module.exports = icons;

package/src/assets/index.js

@@ -8,5 +8,8 @@ export default new Assets().loadAssetsGroup('', {
   },
   get images() {
     return require("./images").images;
+  },
+  get components() {
+    return require("./components").components;
   }
 });

package/src/components/chipsInput/index.js

@@ -6,7 +6,7 @@ import { Constants } from "../../commons/new";
 import { useCombinedRefs, useDidUpdate } from "../../hooks";
 import TextField from "../textField";
 import Chip from "../chip";
-const removeIcon = require("./assets/xSmall.png");
+import Assets from "../../assets";
 export let ChipsInputChangeReason = /*#__PURE__*/function (ChipsInputChangeReason) {
   ChipsInputChangeReason["Added"] = "added";
   ChipsInputChangeReason["Removed"] = "removed";
@@ -85,7 +85,7 @@ const ChipsInput = forwardRef((props, refToForward) => {
     return <Chip key={index} customValue={index}
     // resetSpacings
     // paddingH-s2
-    marginR-s2 marginB-s2 dismissIcon={removeIcon} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
+    marginR-s2 marginB-s2 dismissIcon={Assets.icons.xSmall} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
   };
   const chipList = useMemo(() => {
     return <>

package/src/components/colorSwatch/index.js

@@ -6,7 +6,6 @@ import { asBaseComponent, Constants } from "../../commons/new";
 import View from "../view";
 import TouchableOpacity from "../touchableOpacity";
 import Image from "../image";
-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;
@@ -141,7 +140,7 @@ class ColorSwatch extends PureComponent {
       height: size,
       borderRadius: size / 2
     }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
-        {Colors.isTransparent(this.color) && <Image source={transparentImage} style={this.styles.transparentImage} resizeMode={'cover'} />}
+        {Colors.isTransparent(this.color) && <Image source={Assets.components.transparentSwatch} style={this.styles.transparentImage} resizeMode={'cover'} />}
         {unavailable ? <View style={[this.styles.unavailable, {
         backgroundColor: tintColor
       }]} /> : <Animated.Image source={Assets.icons.check} style={{

package/src/components/hint/index.js

@@ -6,6 +6,7 @@ import View from "../view";
 import Image from "../image";
 import Modal from "../modal";
 import TouchableOpacity from "../touchableOpacity";
+import Assets from "../../assets";
 import { HintPositions, HintProps, TargetAlignments } from "./types";
 import useHintVisibility from "./hooks/useHintVisibility";
 import useHintLayout from "./hooks/useHintLayout";
@@ -14,8 +15,6 @@ import useHintPosition from "./hooks/useHintPosition";
 import HintMockChildren from "./HintMockChildren";
 import HintAnchor from "./HintAnchor";
 import HintBubble from "./HintBubble";
-const sideTip = require("./assets/hintTipSide.png");
-const middleTip = require("./assets/hintTipMiddle.png");
 const DEFAULT_COLOR = Colors.$backgroundPrimaryHeavy;
 const DEFAULT_HINT_OFFSET = Spacings.s4;
 const DEFAULT_EDGE_MARGINS = Spacings.s5;
@@ -125,7 +124,7 @@ const Hint = props => {
     }
   };
   const renderHintTip = () => {
-    const source = useSideTip ? sideTip : middleTip;
+    const source = useSideTip ? Assets.components.hintTipSide : Assets.components.hintTipMiddle;
     const flipVertically = position === HintPositions.TOP;
     const flipHorizontally = targetAlignmentOnScreen === TargetAlignments.RIGHT;
     const flipStyle = {

package/src/components/image/index.js

@@ -156,7 +156,7 @@ class Image extends PureComponent {
     } = modifiers;
     return (
       // @ts-ignore
-      <ImageView style={[tintColor && {
+      <ImageView style={[Constants.isWeb && source?.dimensions, tintColor && {
         tintColor
       }, shouldFlipRTL && styles.rtlFlipped, width && {
         width

package/src/components/picker/helpers/useFieldType.js

@@ -4,8 +4,8 @@ import { Typography, Colors } from "../../../style";
 import View from "../../view";
 import Text from "../../text";
 import Icon from "../../icon";
+import Assets from "../../../assets";
 import { PickerFieldTypes } from "../types";
-const dropdown = require("../assets/dropdown.png");
 const useFieldType = props => {
   const {
     fieldType,
@@ -30,7 +30,7 @@ const useFieldType = props => {
           ...Typography.text70,
           color: Colors.$textNeutral
         },
-        trailingAccessory: trailingAccessory ?? <Icon marginL-s1 source={dropdown} />
+        trailingAccessory: trailingAccessory ?? <Icon marginL-s1 source={Assets.components.dropDown} />
       };
     } else if (fieldType === PickerFieldTypes.settings) {
       return {

package/src/components/stackAggregator/index.js

@@ -7,11 +7,11 @@ import Button, { ButtonSize } from "../button";
 import Card from "../card";
 import { Constants, asBaseComponent } from "../../commons/new";
 import { useDidUpdate } from "../../hooks";
+import Assets from "../../assets";
 const PEEP = 8;
 const DURATION = 300;
 const MARGIN_BOTTOM = 24;
 const buttonStartValue = 0.8;
-const icon = require("./assets/arrow-down.png");
 /**
  * @description: Stack aggregator component
  * @modifiers: margin, padding
@@ -198,7 +198,7 @@ const StackAggregator = props => {
           scale: animatedScale
         }]
       }}>
-          <Button label={'Show less'} iconSource={icon} link size={ButtonSize.small} {...buttonProps} marginH-24 marginB-20 onPress={close} style={styles.button} />
+          <Button label={'Show less'} iconSource={Assets.components.arrowDown} link size={ButtonSize.small} {...buttonProps} marginH-24 marginB-20 onPress={close} style={styles.button} />
         </Animated.View>
 
         {React.Children.map(children, (item, index) => {

package/src/components/stepper/index.js

@@ -6,17 +6,12 @@ import { asBaseComponent } from "../../commons/new";
 import View from "../view";
 import Text from "../text";
 import Button from "../button";
+import Assets from "../../assets";
 var ActionType = /*#__PURE__*/function (ActionType) {
   ActionType["MINUS"] = "minus";
   ActionType["PLUS"] = "plus";
   return ActionType;
 }(ActionType || {});
-const minusOutline = require("./assets/minusOutline.png");
-const minusOutlineSmall = require("./assets/minusOutlineSmall.png");
-const plusOutline = require("./assets/plusOutline.png");
-const plusOutlineSmall = require("./assets/plusOutlineSmall.png");
-const plusSmall = require("./assets/plusSmall.png");
-const minusSmall = require("./assets/minusSmall.png");
 const DEFAULT_STEP = 1;
 /**
  * @description: A stepper component
@@ -150,8 +145,8 @@ class Stepper extends PureComponent {
     } = this.props;
     const allowStepChange = this.allowStepChange(actionType);
     const isFloatingStepper = type === 'floating';
-    const minusButton = isFloatingStepper ? minusSmall : small ? minusOutlineSmall : minusOutline;
-    const plusButton = isFloatingStepper ? plusSmall : small ? plusOutlineSmall : plusOutline;
+    const minusButton = isFloatingStepper ? Assets.components.minusSmall : small ? Assets.components.outline.minusSmall : Assets.components.outline.minus;
+    const plusButton = isFloatingStepper ? Assets.components.plusSmall : small ? Assets.components.outline.plusSmall : Assets.components.outline.plus;
     return <Button link color={isFloatingStepper ? Colors.$iconDefault : undefined} iconSource={actionType === ActionType.MINUS ? minusButton : plusButton} disabled={disabled || !allowStepChange} onPress={() => this.handleStepChange(actionType)} testID={actionType === ActionType.MINUS ? `${testID}.minusStep` : `${testID}.plusStep`} />;
   }
   render() {

package/src/components/wizard/WizardStates.js

@@ -1,6 +1,5 @@
 import Colors from "../../style/colors";
-const checkMarkSmall = require("./assets/checkMarkSmall.png");
-const exclamationSmall = require("./assets/exclamationSmall.png");
+import Assets from "../../assets";
 export const StatesConfig = {
   enabled: {
     color: Colors.$textNeutralHeavy,
@@ -14,7 +13,7 @@ export const StatesConfig = {
   error: {
     color: Colors.$iconDangerLight,
     circleColor: Colors.$outlineDanger,
-    icon: exclamationSmall,
+    icon: Assets.components.exclamationSmall,
     enabled: true,
     accessibilityInfo: 'Validation Error'
   },
@@ -27,7 +26,7 @@ export const StatesConfig = {
   completed: {
     color: Colors.$iconNeutral,
     circleColor: Colors.$outlineDisabled,
-    icon: checkMarkSmall,
+    icon: Assets.components.checkMarkSmall,
     enabled: true,
     accessibilityInfo: 'Completed'
   },