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

package/package.json

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

package/scripts/docs/buildDocsCommon.js

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

package/src/assets/icons/index.js

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

package/src/assets/index.js

@@ -8,8 +8,5 @@ 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";
-import Assets from "../../assets";
+const removeIcon = require("./assets/xSmall.png");
 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={Assets.icons.xSmall} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
+    marginR-s2 marginB-s2 dismissIcon={removeIcon} 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,6 +6,7 @@ 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;
@@ -140,7 +141,7 @@ class ColorSwatch extends PureComponent {
       height: size,
       borderRadius: size / 2
     }, style]} onLayout={this.onLayout} {...this.getAccessibilityInfo()}>
-        {Colors.isTransparent(this.color) && <Image source={Assets.components.transparentSwatch} style={this.styles.transparentImage} resizeMode={'cover'} />}
+        {Colors.isTransparent(this.color) && <Image source={transparentImage} 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,7 +6,6 @@ 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";
@@ -15,6 +14,8 @@ 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;
@@ -124,7 +125,7 @@ const Hint = props => {
     }
   };
   const renderHintTip = () => {
-    const source = useSideTip ? Assets.components.hintTipSide : Assets.components.hintTipMiddle;
+    const source = useSideTip ? sideTip : middleTip;
     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={[Constants.isWeb && source?.dimensions, tintColor && {
+      <ImageView style={[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={Assets.components.dropDown} />
+        trailingAccessory: trailingAccessory ?? <Icon marginL-s1 source={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={Assets.components.arrowDown} link size={ButtonSize.small} {...buttonProps} marginH-24 marginB-20 onPress={close} style={styles.button} />
+          <Button label={'Show less'} iconSource={icon} 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,12 +6,17 @@ 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
@@ -145,8 +150,8 @@ class Stepper extends PureComponent {
     } = this.props;
     const allowStepChange = this.allowStepChange(actionType);
     const isFloatingStepper = type === 'floating';
-    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;
+    const minusButton = isFloatingStepper ? minusSmall : small ? minusOutlineSmall : minusOutline;
+    const plusButton = isFloatingStepper ? plusSmall : small ? plusOutlineSmall : plusOutline;
     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/test.api.json

@@ -285,38 +285,6 @@
             "description": "html:<h2>Title</h2><p>This is a html content</p><ul><li>item 1</li><li>item 2</li></ul>"
           }
         ]
-      },
-      {
-        "title": "Code",
-        "sections": [
-          {
-            "title": "Usage",
-            "type": "usage"
-          },
-          {
-            "type": "info"
-          },
-          {
-            "type": "tip"
-          },
-          {
-            "type": "banner",
-            "title": "NOTE",
-            "description": "This is an interesting information"
-          },
-          {
-            "type": "banner",
-            "title": "Banner",
-            "description": "This is some massage to the user",
-            "color": "pink",
-            "icon": ""
-          },
-          {
-            "type": "props",
-            "title": "API",
-            "description": "This is the list of additional props for the Text component"
-          }
-        ]
       }
     ]
   }

package/src/components/wizard/WizardStates.js

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

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

@@ -1,17 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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.web.js

@@ -1,31 +0,0 @@
-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;