Merge branch 'master' into feat/incubator-dialog-fixes-and-improvements

Author: M-i-k-e-l

.gitignore

@@ -43,6 +43,9 @@ buck-out/
 \.buckd/
 *.keystore
 
+lib/
+.vscode
+
 # fastlane
 #
 # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the

docs/foundation/modifiers.md

@@ -112,9 +112,9 @@ The last type of modifiers is for styling your components
 ```
 
 
-! all styling modifiers are based on our [`Colors` & `Typography` presets](/react-native-ui-lib/foundation/style).  
+! all styling modifiers are based on our [`Colors` & `Typography` presets](/docs/foundation/style).  
 You can load your own presets and use them as modifiers. 
 
 
 
-Check out [this example](/react-native-ui-lib/getting-started/usage) where we use most of these props.
+Check out [this example](/docs/getting-started/usage) where we use most of these props.

docs/getting-started/setup.md

@@ -24,7 +24,9 @@ import {KeyboardTrackingView, KeyboardAwareInsetsView, KeyboardRegistry, Keyboar
 
 ## Install UILib
 
-First, run `npm install react-native-ui-lib`
+- Run `npm install react-native-ui-lib`  
+- Install mandatory [peer dependencies](#peer-dependencies), `npm i react-native-reanimated react-native-gesture-handler`
+- Install ios pods, `cd ios && pod install`
 
 If you plan on using specific components, see **UILib Packages** above.  
 *For some packages you might still need to install one of the peer dependencies*
@@ -62,10 +64,9 @@ Some of the components are using the native dependencies listed below - those ar
 
 ## Demo App
 
-Our demo app is located [here](https://github.com/wix/react-native-ui-lib/tree/master/demo). To run it:
-
-- Clone the repo
-- Install dependencies: `npm install`
-- (for iOS) `cd ios && pod install && cd ..`
-- Start the packager: `npm start`
-- Build the app: `npm run ios` or `npm run android` (or from Xcode or Android Studio).
+- Clone the project `git clone [email protected]:wix/react-native-ui-lib.git`
+- `cd react-native-ui-lib`
+- Install dependencies `npm install`
+- (for iOS) `cd ios && pod install`
+- Start the packager `npm start`
+- Build the app `npm run ios` or `npm run android` (or from Xcode or Android Studio).

docuilib/docusaurus.config.js

@@ -7,16 +7,17 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
   module.exports = {
     title: 'RNUILib',
     tagline: 'React Native UI Lib',
-    url: 'https://github.com/wix/react-native-ui-lib',
-    baseUrl: '/',
+    url: 'https://wix.github.io',
+    baseUrl: '/react-native-ui-lib/',
     onBrokenLinks: 'throw',
     onBrokenMarkdownLinks: 'warn',
     favicon: 'img/favicon.ico',
     organizationName: 'wix', // Usually your GitHub org/user name.
     projectName: 'react-native-ui-lib', // Usually your repo name.
+    trailingSlash: false,
     customFields: {
       expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android',
-      stars: '3.8'
+      stars: '3.9'
     },
     plugins: ['docusaurus-plugin-sass'],
     presets: [

docuilib/src/components/ComponentsSection.module.scss

@@ -6,13 +6,16 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-
+  padding-left: 40px;
+  padding-right: 40px;
+  
   .componentsInner {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
+    padding: 0;
 
     p {
       @include desktop {

docuilib/src/components/FeatureSection.module.scss

@@ -7,6 +7,8 @@
   padding-bottom: 100px;
   width: 100%;
   text-align: center;
+  padding-left: 40px;
+  padding-right: 40px;
 
   .cards {
     display: flex;

docuilib/src/components/MainSection.module.scss

@@ -2,10 +2,10 @@
 
 .main {
   position: relative;
-  height: 75vh;
   width: 100%;
   display: flex;
   justify-content: center;
+  margin-bottom: 40px;
 
   @include desktop {
     height: 100vh;
@@ -22,16 +22,16 @@
   }
 
   .mainContent {
-    position: absolute;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     top: 15vh;
     text-align: center;
-    padding: 0 40px;
+    padding: 40px;
 
     @include desktop() {
+      position: absolute;
       padding: 0;
       top: 15vw;
       left: 7vw;
@@ -40,9 +40,15 @@
     }
 
     > p {
-      font-size: 3em;
+      font-size: 2.5em;
       font-weight: 600;
       margin: 0;
+      line-height: 1.2;
+      
+      @include desktop {
+        font-size: 3em;
+        line-height: 1.5;
+      }
 
       > .libName {
         color: $primary;
@@ -55,8 +61,10 @@
       border: 1px solid;
       border-radius: 2px;
       align-self: center;
-
+      margin-top: 20px;
+      
       @include desktop {
+        margin-top: 0;
         align-self: flex-start;
       }
 

docuilib/src/components/MainSection.tsx

@@ -8,7 +8,6 @@ import GoldStarSvg from '@site/static/img/goldStar.svg';
 
 export default () => {
   const {siteConfig} = useDocusaurusContext();
-  console.warn('ethan - siteConfig', siteConfig.customFields.stars)
 
   return (
     <div className={styles.main}>

generatedTypes/src/components/carousel/index.d.ts

@@ -46,15 +46,15 @@ declare class Carousel extends Component<CarouselProps, CarouselState> {
     stopAutoPlay(): void;
     resetAutoPlay(): void;
     goToPage(pageIndex: number, animated?: boolean): void;
+    goToNextPage(): void;
     getCalcIndex(index: number): number;
     getSnapToOffsets: () => number[] | undefined;
     shouldUsePageWidth(): number | false | undefined;
     shouldEnablePagination(): boolean | undefined;
-    onContainerLayout: ({ nativeEvent: { layout: { width: containerWidth, height: containerHeight } } }: LayoutChangeEvent) => void;
     shouldAllowAccessibilityLayout(): boolean | undefined;
     onContentSizeChange: () => void;
+    onContainerLayout: ({ nativeEvent: { layout: { width: containerWidth, height: containerHeight } } }: LayoutChangeEvent) => void;
     onMomentumScrollEnd: () => void;
-    goToNextPage(): void;
     onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     onScrollEvent: (...args: any[]) => void;
     renderChild: (child: ReactNode, key: Key) => JSX.Element | undefined;

generatedTypes/src/uilib-test-renderer/index.d.ts

@@ -1,3 +1,4 @@
 export * from '@testing-library/react-native';
 import { findStyle } from './helper';
-export { findStyle };
+import { fireOnMomentumScrollEnd, fireOnScroll } from './scrollViewHelper';
+export { findStyle, fireOnMomentumScrollEnd, fireOnScroll };

generatedTypes/src/uilib-test-renderer/scrollViewHelper.d.ts

@@ -0,0 +1,9 @@
+declare const fireOnMomentumScrollEnd: (component: any, { x, y }: {
+    x?: number | undefined;
+    y?: number | undefined;
+}) => void;
+declare const fireOnScroll: (component: any, { x, y }: {
+    x?: number | undefined;
+    y?: number | undefined;
+}) => void;
+export { fireOnMomentumScrollEnd, fireOnScroll };

package.json

@@ -38,6 +38,7 @@
     "docs:deploy": "(cd ./uilib-docs && gatsby build --prefix-paths && gh-pages -d public --branch gh-pages)",
     "docs:build": "(cd ./uilib-docs && npm install && gatsby build --prefix-paths && gh-pages -d public --branch gh-pages)",
     "docs:develop": "(cd ./uilib-docs && gatsby develop)",
+    "build:docs": "node scripts/build-docs.js",
     "bump:patch": "npm version patch",
     "demo": "./scripts/demo.sh",
     "release": "node ./scripts/release.js",

scripts/build-docs.js

@@ -47,7 +47,8 @@ components.forEach(component => {
     if (component.extendsLink) {
       extendsText = `[${extendsText}](${component.extendsLink})`;
     } else {
-      extendsText = `[${extendsText}](${extendsText})`;
+      const extendedComponentName = _.last(_.split(extendsText, '/')); // Incubator/TextField -> TextField
+      extendsText = `[${extendedComponentName}](/docs/components/${extendsText})`;
     }
     content += `:::info\n`;
     content += `This component extends **${extendsText}** props.\n`;

src/components/carousel/__tests__/index.spec.js

@@ -0,0 +1,83 @@
+import {map} from 'lodash';
+import React from 'react';
+import {render} from '@testing-library/react-native';
+import {Text, View} from 'react-native';
+import {fireOnScroll, fireOnMomentumScrollEnd} from '../../../uilib-test-renderer';
+import {Constants} from '../../../helpers';
+import Carousel from '../index';
+
+const numberOfPagesShown = 5;
+const onChangePageMock = jest.fn();
+const onScrollMock = jest.fn();
+
+const TestCase = props => {
+  return (
+    <Carousel 
+      testID={'carousel'}
+      onChangePage={onChangePageMock}
+      onScroll={onScrollMock}
+      {...props}
+    >
+      {map([...Array(numberOfPagesShown)], (_, index) => (
+        <Page key={index}>
+          <Text testID={`page-${index}`}>Page #{index}</Text>
+        </Page>
+      ))}
+    </Carousel>
+  );
+};
+
+const Page = ({children, ...others}) => {
+  return (
+    <View {...others} style={{flex: 1}}>
+      {children}
+    </View>
+  );
+};
+
+describe('Carousel render tests', () => {
+  
+  describe('initialPage', () => {
+    it('should be set to default initialPage', () => {
+      const {getByTestId} = render(<TestCase/>);
+      const scrollView = getByTestId('carousel');
+      
+      expect(scrollView.props.contentOffset.x).toBe(0);
+    });
+
+    it('should be set to initialPage = 2', () => {
+      const {getByTestId} = render(<TestCase initialPage={2}/>);
+      const scrollView = getByTestId('carousel');
+      
+      expect(scrollView.props.contentOffset.x).toBe(Constants.screenWidth * 2);
+    });
+  });
+
+  describe('onScroll', () => {
+    it('should trigger onScroll from the second scroll', () => {
+      const {getByTestId} = render(<TestCase/>);
+      const scrollView = getByTestId('carousel');
+
+      fireOnScroll(scrollView, {x: Constants.screenWidth}); //NOTE: first scroll doesn't fire onScroll
+      expect(onScrollMock).not.toHaveBeenCalled();
+
+      fireOnScroll(scrollView, {x: Constants.screenWidth});
+      expect(onScrollMock).toHaveBeenCalled();
+    });
+  });
+
+  describe('onChangePage', () => {
+    it('should trigger onChangePage with current page', async () => {
+      const {getByTestId} = render(<TestCase/>);
+      const scrollView = getByTestId('carousel');
+
+      fireOnScroll(scrollView, {x: Constants.screenWidth}); //NOTE: first scroll doesn't fire onScroll
+      fireOnScroll(scrollView, {x: Constants.screenWidth});
+      expect(onChangePageMock).not.toHaveBeenCalled();
+
+      // await new Promise(r => setTimeout(r, 1000));
+      fireOnMomentumScrollEnd(scrollView, {x: Constants.screenWidth});
+      expect(onChangePageMock).toHaveBeenCalledWith(1, 0, {isAutoScrolled: false});
+    });
+  });
+});