react-native-ui-lib 7.39.0-snapshot.6519 → 7.39.0-snapshot.6530

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.39.0-snapshot.6519",
+  "version": "7.39.0-snapshot.6530",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
@@ -14,6 +14,7 @@
     "url": "https://github.com/wix/react-native-ui-lib"
   },
   "scripts": {
+    "update-web-assets": "node scripts/assets/extract-dimensions.ts",
     "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",

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',
@@ -30,6 +31,9 @@ const VALID_COMPONENTS_CATEGORIES = [
 
 function buildDocs(apiFolders, componentsPreProcess) {
   let components = readComponentsFromApiFiles(apiFolders);
+
+  logStatistics(components);
+
   components = componentsPreProcess?.(components) ?? components;
   resetDocsDir();
   processComponents(components);
@@ -92,14 +96,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)) {
@@ -125,6 +137,22 @@ function generateExtendsLink(extendsLink) {
   return extendsText;
 }
 
+function logStatistics(components) {
+  const groupedComponents = _.countBy(components, 'name');
+  const duplicateComponents = Object.entries(groupedComponents)
+    .filter(([_, count]) => count > 1)
+    .map(([name, count]) => `${name} (${count} times)`);
+
+  if (duplicateComponents.length > 0) {
+    console.log('Components with multiple occurrences:\n-', duplicateComponents.join('\n- '));
+  }
+
+  const componentsWithoutSnippet = components.filter(c => !c.snippet).map(c => c.name);
+  if (componentsWithoutSnippet.length > 0) {
+    console.log('Components missing snippet:\n-', componentsWithoutSnippet.join('\n- '));
+  }
+}
+
 function buildOldDocs(component) {
   let content = '';
   content += `import UILivePreview from '@site/src/components/UILivePreview';\n\n`;
@@ -184,12 +212,10 @@ 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`;
-  } else {
-    console.warn(`${component.name} does not have a snippet`);
   }
 
   /* Props */

package/src/assets/index.js

@@ -1,12 +1,9 @@
 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;
   }
 });

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

@@ -0,0 +1,3 @@
+import { Assets } from './Assets';
+declare const _default: Assets;
+export default _default;

package/src/assets/index.web.js

@@ -0,0 +1,9 @@
+import { Assets } from "./Assets";
+export default new Assets().loadAssetsGroup('', {
+  get emojis() {
+    return require("./emojis").emojis;
+  },
+  get internal() {
+    return require("./internal").internal;
+  }
+});

package/src/assets/{icons → internal/icons}/index.js

@@ -2,8 +2,17 @@ export const icons = {
   get check() {
     return require('./check.png');
   },
+  get checkMarkSmall() {
+    return require('./checkMarkSmall.png');
+  },
   get checkSmall() {
-    return require('./check-small.png');
+    return require('./checkSmall.png');
+  },
+  get chevronDown() {
+    return require('./chevronDown.png');
+  },
+  get exclamationSmall() {
+    return require('./exclamationSmall.png');
   },
   get minusSmall() {
     return require('./minusSmall.png');
@@ -17,10 +26,13 @@ export const icons = {
   get x() {
     return require('./x.png');
   },
+  get xFlat() {
+    return require('./xFlat.png');
+  },
   get xMedium() {
     return require('./xMedium.png');
   },
-  get xFlat() {
-    return require('./xFlat.png');
+  get xSmall() {
+    return require('./xSmall.png');
   }
 };

package/src/assets/internal/icons/index.web.d.ts

@@ -0,0 +1,107 @@
+export declare const icons: {
+    readonly checkSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly check: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly checkMarkSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly dropdown: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly exclamationSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly hintTipMiddle: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly hintTipSide: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly minusSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly plusSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly search: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly transparentSwatch: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly x: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly xFlat: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly xMedium: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly xSmall: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+};

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

@@ -0,0 +1,137 @@
+export const icons = {
+  get checkSmall() {
+    return {
+      uri: require("./check-small.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get check() {
+    return {
+      uri: require("./check.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get checkMarkSmall() {
+    return {
+      uri: require("./checkMarkSmall.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get dropdown() {
+    return {
+      uri: require("./dropdown.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get exclamationSmall() {
+    return {
+      uri: require("./exclamationSmall.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get hintTipMiddle() {
+    return {
+      uri: require("./hintTipMiddle.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get hintTipSide() {
+    return {
+      uri: require("./hintTipSide.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 transparentSwatch() {
+    return {
+      uri: require("./transparentSwatch.png"),
+      dimensions: {
+        width: 20,
+        height: 20
+      }
+    };
+  },
+  get x() {
+    return {
+      uri: require("./x.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get xFlat() {
+    return {
+      uri: require("./xFlat.png"),
+      dimensions: {
+        width: 24,
+        height: 24
+      }
+    };
+  },
+  get xMedium() {
+    return {
+      uri: require("./xMedium.png"),
+      dimensions: {
+        width: 20,
+        height: 20
+      }
+    };
+  },
+  get xSmall() {
+    return {
+      uri: require("./xSmall.png"),
+      dimensions: {
+        width: 16,
+        height: 16
+      }
+    };
+  }
+};

package/src/assets/internal/images/index.js

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

package/src/assets/internal/images/index.web.d.ts

@@ -0,0 +1,37 @@
+export declare const images: {
+    readonly gradient: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly gradientOverlay: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly gradientOverlayHigh: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly gradientOverlayLow: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+    readonly gradientOverlayMedium: {
+        uri: any;
+        dimensions: {
+            width: number;
+            height: number;
+        };
+    };
+};

package/src/assets/internal/images/index.web.js

@@ -0,0 +1,47 @@
+export const images = {
+  get gradient() {
+    return {
+      uri: require("./gradient.png"),
+      dimensions: {
+        width: 1,
+        height: 24
+      }
+    };
+  },
+  get gradientOverlay() {
+    return {
+      uri: require("./gradientOverlay.png"),
+      dimensions: {
+        width: 1,
+        height: 50
+      }
+    };
+  },
+  get gradientOverlayHigh() {
+    return {
+      uri: require("./gradientOverlayHigh.png"),
+      dimensions: {
+        width: 1,
+        height: 100
+      }
+    };
+  },
+  get gradientOverlayLow() {
+    return {
+      uri: require("./gradientOverlayLow.png"),
+      dimensions: {
+        width: 1,
+        height: 25
+      }
+    };
+  },
+  get gradientOverlayMedium() {
+    return {
+      uri: require("./gradientOverlayMedium.png"),
+      dimensions: {
+        width: 1,
+        height: 75
+      }
+    };
+  }
+};

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

@@ -0,0 +1,4 @@
+export declare const internal: {
+    readonly icons: any;
+    readonly images: any;
+};

package/src/assets/internal/index.js

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

package/src/assets/internal/index.web.d.ts

@@ -0,0 +1,4 @@
+export declare const internal: {
+    readonly icons: any;
+    readonly images: any;
+};

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

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

package/src/commons/Constants.d.ts

@@ -47,6 +47,7 @@ declare const constants: {
     };
     backspaceKey: string;
     enterKey: string;
+    getFontScale: () => number;
 };
 export default constants;
 export declare const _reset: () => void;

package/src/commons/Constants.js

@@ -1,4 +1,4 @@
-import { Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, StatusBar } from 'react-native';
+import { Platform, Dimensions, NativeModules, I18nManager, AccessibilityInfo, StatusBar, PixelRatio } from 'react-native';
 export let orientations = /*#__PURE__*/function (orientations) {
   orientations["PORTRAIT"] = "portrait";
   orientations["LANDSCAPE"] = "landscape";
@@ -166,7 +166,9 @@ const constants = {
   },
   /* Keyboard */
   backspaceKey: 'Backspace',
-  enterKey: 'Enter'
+  enterKey: 'Enter',
+  /* Font scale */
+  getFontScale: PixelRatio.getFontScale
 };
 setStatusBarHeight();
 Dimensions.addEventListener('change', updateConstants);

package/src/components/card/index.js

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

package/src/components/checkbox/index.js

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

package/src/components/chip/index.js

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

package/src/components/chipsInput/index.js

@@ -5,8 +5,8 @@ import { StyleSheet } from 'react-native';
 import { Constants } from "../../commons/new";
 import { useCombinedRefs, useDidUpdate } from "../../hooks";
 import TextField from "../textField";
+import Assets from "../../assets";
 import Chip from "../chip";
-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={removeIcon} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
+    marginR-s2 marginB-s2 dismissIcon={Assets.internal.icons.xSmall} recorderTag={'mask'} {...defaultChipProps} {...chip.invalid ? invalidChipProps : undefined} {...chip} onPress={onChipPress} onDismiss={isMarkedForRemoval ? removeMarkedChip : undefined} />;
   };
   const chipList = useMemo(() => {
     return <>

package/src/components/colorPicker/ColorPickerDialogHeader.js

@@ -16,10 +16,10 @@ const ColorPickerDialogHeader = props => {
     onDonePressed
   } = props;
   return <View row spread bg-$backgroundDefault paddingH-20 style={styles.header}>
-      <Button link iconSource={Assets.icons.x} iconStyle={{
+      <Button link iconSource={Assets.internal.icons.x} iconStyle={{
       tintColor: Colors.$iconDefault
     }} onPress={onDismiss} accessibilityLabel={_get(accessibilityLabels, 'dismissButton')} testID={`${testID}.dialog.cancel`} />
-      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
+      <Button color={doneButtonColor} disabled={!valid} link iconSource={Assets.internal.icons.check} onPress={onDonePressed} accessibilityLabel={_get(accessibilityLabels, 'doneButton')} testID={`${testID}.dialog.done`} />
     </View>;
 };
 export default ColorPickerDialogHeader;

package/src/components/colorPicker/ColorPickerPreview.js

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { StyleSheet, TextInput, PixelRatio, I18nManager } from 'react-native';
+import { StyleSheet, TextInput, I18nManager } from 'react-native';
 import { Colors, Typography } from "../../style";
 import { BORDER_RADIUS, getHexString, getTextColor } from "./ColorPickerPresenter";
 import View from "../view";
@@ -19,7 +19,7 @@ const ColorPickerPreview = props => {
   const textInput = useRef(null);
   const hex = getHexString(color);
   const textColor = getTextColor(hex);
-  const fontScale = PixelRatio.getFontScale();
+  const fontScale = Constants.getFontScale();
   const value = Colors.isTransparent(text) ? '000000' : text;
   return <View style={[styles.preview, {
     backgroundColor: hex