Merge branch 'master' into release

Author: ethanshar

Gemfile.lock

@@ -3,7 +3,7 @@ GEM
   specs:
     CFPropertyList (3.0.5)
       rexml
-    activesupport (6.1.7.3)
+    activesupport (6.1.7.6)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -63,10 +63,10 @@ GEM
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
     httpclient (2.8.3)
-    i18n (1.12.0)
+    i18n (1.14.1)
       concurrent-ruby (~> 1.0)
     json (2.6.2)
-    minitest (5.18.0)
+    minitest (5.19.0)
     molinillo (0.8.0)
     nanaimo (0.3.0)
     nap (1.1.0)
@@ -85,7 +85,7 @@ GEM
       colored2 (~> 3.1)
       nanaimo (~> 0.3.0)
       rexml (~> 3.2.4)
-    zeitwerk (2.6.7)
+    zeitwerk (2.6.11)
 
 PLATFORMS
   ruby

demo/src/screens/componentScreens/ImageScreen.tsx

@@ -9,8 +9,8 @@ const BROKEN_URL = 'file:///Desktop/website/img/cupcake.jpg';
 const DEFAULT_SIZE = 100;
 
 const file = Assets.svgs.demo.logo;
-const uri = {uri: 'http://thenewcode.com/assets/images/thumbnails/homer-simpson.svg'};
-const uriWithCss = {uri: 'http://thenewcode.com/assets/svg/accessibility.svg'};
+const uri = {uri: 'https://www.svgrepo.com/show/530581/cell-phone.svg'};
+// const uriWithCss = {uri: ''}; // TODO: find an example
 const xml = `
   <svg width="32" height="32" viewBox="0 0 32 32">
     <path
@@ -43,7 +43,7 @@ enum SizeType {
 enum SvgType {
   File = 'file',
   Uri = 'uri',
-  UriWithCss = 'use_with_css',
+  // UriWithCss = 'use_with_css',
   Xml = 'xml'
 }
 
@@ -79,8 +79,8 @@ class ImageScreen extends Component<{}, State> {
         return file;
       case SvgType.Uri:
         return uri;
-      case SvgType.UriWithCss:
-        return uriWithCss;
+      // case SvgType.UriWithCss:
+      //   return uriWithCss;
       case SvgType.Xml:
       default:
         return xml;

docs/foundation/testing.md

@@ -29,7 +29,7 @@ In order to initialize a test driver you pass it the renderTree and the componen
 ### Example
 Suppose we have a form that takes a `first name`, `last name` and an `address` and we want to test the submitting of this form. Our form component will look something like this:
 ```jsx
-import {Button, TextField, View} from '@wix/wix-react-native-ui-lib';
+import {Button, TextField, View} from 'react-native-ui-lib/testkit';
 
 type OnSubmitHandler = (firstName: string, lastName: string, address: string) => void;
 const MyForm = (props: {onSubmit: OnSubmitHandler}) => {
@@ -51,7 +51,7 @@ const MyForm = (props: {onSubmit: OnSubmitHandler}) => {
 #### In order to test our flow we would do the following steps:
 1. Import the TextField and Button driver from UI-LIB's testkit
 ```javascript
-import {TextFieldDriver, ButtonDriver} from '@wix/react-native-ui-lib/testkit';
+import {TextFieldDriver, ButtonDriver} from 'react-native-ui-lib/testkit';
 ```
 2. render our test case
 ```javascript

expoDemo/package.json

@@ -26,7 +26,7 @@
     "react-native-safe-area-context": "4.5.0",
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
-    "react-native-svg-transformer": "^1.0.0",
+    "react-native-svg-transformer": "1.1.0",
     "react-native-ui-lib": "^7.1.0",
     "react-native-web": "~0.18.12",
     "unicorn-demo-app": "^7.1.0"

package.json

@@ -56,7 +56,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.4",
     "@babel/plugin-transform-modules-commonjs": "^7.17.9",
     "@babel/preset-env": "^7.20.0",
     "@babel/preset-react": "^7.10.1",
@@ -85,19 +85,16 @@
     "@welldone-software/why-did-you-render": "^3.2.1",
     "babel-jest": "^29.2.1",
     "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-preset-react-native": "*",
+    "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "8.19.0",
     "eslint-config-wix": "2.0.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.0.4",
     "eslint-plugin-react-native": "^4.0.0",
     "eslint-plugin-uilib": "file:./eslint-rules",
-    "gh-pages": "^1.1.0",
     "jest": "^29.2.1",
     "light-date": "^1.2.0",
     "metro-react-native-babel-preset": "0.73.10",
-    "mocha": "^5.0.0",
     "moment": "^2.24.0",
     "object-hash": "^3.0.0",
     "postcss": "^8.4.21",
@@ -112,12 +109,12 @@
     "react-native-gesture-handler": "2.9.0",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.6.2",
-    "react-native-mmkv": "2.6.1",
+    "react-native-mmkv": "2.11.0",
     "react-native-navigation": "7.32.1",
     "react-native-reanimated": "3.4.0",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^13.7.0",
-    "react-native-svg-transformer": "^0.14.3",
+    "react-native-svg-transformer": "1.1.0",
     "react-test-renderer": "18.2.0",
     "reassure": "^0.4.1",
     "shell-utils": "^1.0.10",

scripts/deployDocs.sh

@@ -8,4 +8,4 @@ echo "Building docs site..."
 (cd ./docuilib && npm run build)
 
 echo "Deploying docs..."
-(cd ./docuilib && GIT_USER=$username npm run deploy)
+(cd ./docuilib && GIT_USER=$username USE_SSH=true npm run deploy)

src/components/sectionsWheelPicker/SectionsWheelPicker.driver.tsx

@@ -1,22 +1,17 @@
 import _ from 'lodash';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
 import {WheelPickerDriver} from '../WheelPicker/WheelPicker.driver';
-import {WheelPickerItemValue} from '../WheelPicker';
 import {SectionsWheelPickerProps} from './index';
 
-export const SectionsWheelPickerDriver = <T extends WheelPickerItemValue>(props: ComponentProps) => {
+export const SectionsWheelPickerDriver = (props: ComponentProps) => {
   const driver = useComponentDriver(props);
-  const sections = driver.getElement().children as SectionsWheelPickerProps<T>;
-  const sectionsDrivers = _.map(sections, (_, index) => {
+  const sections = driver.getElement().children as SectionsWheelPickerProps['sections'];
+  const sectionsDrivers = _.map(sections, (section, index) => {
     const sectionTestID = `${props.testID}.${index}`;
     return WheelPickerDriver({
       renderTree: props.renderTree,
-      testID: sectionTestID
+      testID: section?.testID || sectionTestID
     });
   });
-
-  
-
-
   return {...driver, sections, sectionsDrivers};
 };

src/components/tabController/TabBar.tsx

@@ -219,6 +219,7 @@ const TabBar = (props: Props) => {
           key={`${index}_${item.label}`}
           index={index}
           onLayout={onItemLayout}
+          spreadItems={spreadItems}
         />
       );
     });
@@ -234,7 +235,8 @@ const TabBar = (props: Props) => {
     backgroundColor,
     activeBackgroundColor,
     centerSelected,
-    onItemLayout
+    onItemLayout,
+    spreadItems
   ]);
 
   const _indicatorTransitionStyle = useAnimatedStyle(() => {

src/components/tabController/TabBarItem.tsx

@@ -8,11 +8,13 @@ import {Colors, Typography, Spacings} from '../../style';
 import Badge, {BadgeProps} from '../badge';
 import View from '../view';
 import TabBarContext from './TabBarContext';
+import Constants from '../../commons/Constants';
+import type {TabControllerBarProps} from './TabBar';
 
 const DEFAULT_LABEL_COLOR = Colors.$textDefault;
 const DEFAULT_SELECTED_LABEL_COLOR = Colors.$textPrimary;
 
-export interface TabControllerItemProps {
+export interface TabControllerItemProps extends Pick<TabControllerBarProps, 'spreadItems'> {
   /**
    * label of the tab
    */
@@ -132,6 +134,7 @@ export default function TabBarItem({
   testID,
   ignore,
   style,
+  spreadItems,
   ...props
 }: Props) {
   const {currentPage, setCurrentIndex} = useContext(TabBarContext);
@@ -193,9 +196,10 @@ export default function TabBarItem({
   });
 
   const _style = useMemo(() => {
+    const flex = Constants.isWeb ? (spreadItems ? 1 : undefined) : 1;
     const constantWidthStyle = itemWidth.current ? {flex: 0, width: itemWidth.current} : undefined;
-    return [styles.tabItem, style, constantWidthStyle, pressStyle];
-  }, [style]);
+    return [styles.tabItem, {flex}, style, constantWidthStyle, pressStyle];
+  }, [style, spreadItems]);
 
   const gesture = Gesture.Tap()
     .maxDuration(60000)
@@ -250,7 +254,6 @@ export default function TabBarItem({
 
 const styles = StyleSheet.create({
   tabItem: {
-    flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',

src/incubator/Dialog/index.tsx

@@ -54,7 +54,7 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>)
     testID,
     children
   } = props;
-  const {overlayBackgroundColor = Colors.rgba(Colors.$backgroundInverted, 0.3), ...otherModalProps} = modalProps;
+  const {overlayBackgroundColor = Colors.rgba(Colors.grey10, 0.65), ...otherModalProps} = modalProps;
 
   const visibility = useSharedValue(0); // value between 0 (closed) and 1 (open)
   const initialTranslation = useSharedValue(0);