@shoutem/ui 5.2.3 → 5.3.0

package/__tests__/View-test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { View } from '../components/View';
+
+test('View renders correctly', () => {
+  const tree = renderer.create(
+    <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />,
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+test('View renders children vertically with vertical styleName', () => {
+  const tree = renderer.create(
+    <View styleName="vertical">
+      <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
+      <View style={{ height: 40, width: 40, backgroundColor: 'green' }} />
+    </View>
+  );
+});
+
+test('View centers children horizontally with h-center styleName', () => {
+  const tree = renderer.create(
+    <View style={{ width: 100 }} styleName="vertical h-center">
+      <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
+      <View style={{ height: 40, width: 40, backgroundColor: 'green' }} />
+    </View>
+  );
+});
+
+test('View renders children horizontally with horizontal styleName', () => {
+  const tree = renderer.create(
+    <View styleName="horizontal">
+      <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
+      <View style={{ height: 40, width: 40, backgroundColor: 'green' }} />
+    </View>
+  );
+});
+
+test('View centers children vertically with v-center styleName', () => {
+  const tree = renderer.create(
+    <View style={{ height: 100 }} styleName="horizontal v-center">
+      <View style={{ height: 40, width: 40, backgroundColor: 'red' }} />
+      <View style={{ height: 40, width: 40, backgroundColor: 'green' }} />
+    </View>
+  );
+});
+
+test('View fills parent with fill-parent styleName', () => {
+  const tree = renderer.create(
+    <View style={{ height: 40, width: 40 }}>
+      <View style={{ backgroundColor: 'red' }} styleName="fill-parent" />
+    </View>
+  );
+});

package/__tests__/__snapshots__/View-test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`View renders correctly 1`] = `
+<View
+  animationOptions={Object {}}
+  onLayout={[Function]}
+  style={
+    Object {
+      "backgroundColor": "red",
+      "height": 40,
+      "width": 40,
+    }
+  }
+/>
+`;

package/const.js

@@ -1,22 +1,30 @@
-const IPHONE_X_HOME_INDICATOR_PADDING = 34;
-const IPHONE_X_LONG_SIDE = 812;
-const IPHONE_X_NOTCH_PADDING = 30;
-
-const IPHONE_XR_LONG_SIDE = 896;
-const IPHONE_XR_NOTCH_PADDING = 34;
-
-const IPHONE_12_LONG_SIDE = 844;
-const IPHONE_12_MAX_LONG_SIDE = 926;
-
-const NAVIGATION_HEADER_HEIGHT = 64;
-
-module.exports = {
+import { Platform, StatusBar } from 'react-native';
+import {
+  IPHONE_12_LONG_SIDE,
+  IPHONE_12_MAX_LONG_SIDE,
   IPHONE_X_HOME_INDICATOR_PADDING,
   IPHONE_X_LONG_SIDE,
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_LONG_SIDE,
   IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_BAR_HEIGHT,
+  NAVIGATION_HEADER_HEIGHT,
+} from './helpers';
+
+const STATUS_BAR_OFFSET =
+  Platform.OS === 'android' ? -StatusBar.currentHeight : 0;
+
+// TODO: Deprecate and remove exports from here
+// Currently leaving for backwards compatibility
+export {
   IPHONE_12_LONG_SIDE,
   IPHONE_12_MAX_LONG_SIDE,
+  IPHONE_X_HOME_INDICATOR_PADDING,
+  IPHONE_X_LONG_SIDE,
+  IPHONE_X_NOTCH_PADDING,
+  IPHONE_XR_LONG_SIDE,
+  IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  STATUS_BAR_OFFSET,
 };

package/helpers/device-selector.js

@@ -1,16 +1,22 @@
-import { Dimensions, Platform } from 'react-native';
+import { Dimensions, Platform, StatusBar } from 'react-native';
 import { hasNotch } from 'react-native-device-info';
 import _ from 'lodash';
-import {
-  IPHONE_12_LONG_SIDE,
-  IPHONE_12_MAX_LONG_SIDE,
-  IPHONE_X_LONG_SIDE,
-  IPHONE_XR_LONG_SIDE,
-} from '../const';
 
 const { OS, isPad, isTVOS } = Platform;
 const { width, height } = Dimensions.get('window');
 
+export const IPHONE_X_HOME_INDICATOR_PADDING = 34;
+export const IPHONE_X_LONG_SIDE = 812;
+export const IPHONE_X_NOTCH_PADDING = 30;
+
+export const IPHONE_XR_LONG_SIDE = 896;
+export const IPHONE_XR_NOTCH_PADDING = 34;
+
+export const IPHONE_12_LONG_SIDE = 844;
+export const IPHONE_12_MAX_LONG_SIDE = 926;
+
+export const NAVIGATION_HEADER_HEIGHT = 64;
+
 const xDimensionsMatch =
   height === IPHONE_X_LONG_SIDE || width === IPHONE_X_LONG_SIDE;
 
@@ -58,6 +64,13 @@ function select(settings) {
   return _.get(settings, 'default');
 }
 
+export const NAVIGATION_BAR_HEIGHT = select({
+  iPhoneX: NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING,
+  iPhoneXR: NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING,
+  notchedAndroid: NAVIGATION_HEADER_HEIGHT + StatusBar.currentHeight,
+  default: NAVIGATION_HEADER_HEIGHT,
+});
+
 export const Device = {
   isIphoneX,
   isIphoneXR,

package/helpers/index.js

@@ -1,4 +1,13 @@
-import { Device } from './device-selector';
-import Keyboard from './keyboard';
-
-export { Device, Keyboard };
+export {
+  Device,
+  IPHONE_12_LONG_SIDE,
+  IPHONE_12_MAX_LONG_SIDE,
+  IPHONE_X_HOME_INDICATOR_PADDING,
+  IPHONE_X_LONG_SIDE,
+  IPHONE_X_NOTCH_PADDING,
+  IPHONE_XR_LONG_SIDE,
+  IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_BAR_HEIGHT,
+  NAVIGATION_HEADER_HEIGHT,
+} from './device-selector';
+export { calculateKeyboardOffset, default as Keyboard } from './keyboard';

package/helpers/keyboard.js

@@ -1,5 +1,5 @@
 import { Platform, StatusBar } from 'react-native';
-import { NAVIGATION_BAR_HEIGHT } from '../theme';
+import { NAVIGATION_BAR_HEIGHT } from './device-selector';
 
 export function calculateKeyboardOffset(extraOffset = 0) {
   const resolvedOffset = NAVIGATION_BAR_HEIGHT + extraOffset;
@@ -11,4 +11,8 @@ export function calculateKeyboardOffset(extraOffset = 0) {
   return StatusBar.currentHeight + resolvedOffset;
 }
 
+// TODO: Deprecate and remove Keyboard.calculateKeyboardOffset
+// Replace with direct function call. It's cleaner for any practical use of this
+// because we will usually import Keyboard from react-native alongside this, so
+// we're forced to rename imports.
 export default { calculateKeyboardOffset };

package/index.js

@@ -1,12 +1,4 @@
 import { setDefaultThemeStyle } from './init';
-import getTheme, {
-  calculateLineHeight,
-  defaultThemeVariables,
-  dimensionRelativeToIphone,
-  resolveFontFamily,
-  resolveFontStyle,
-  resolveFontWeight,
-} from './theme';
 
 setDefaultThemeStyle();
 
@@ -15,12 +7,13 @@ export {
   calculateLineHeight,
   defaultThemeVariables,
   dimensionRelativeToIphone,
-  getTheme,
+  default as getTheme,
   resolveFontFamily,
   resolveFontStyle,
   resolveFontWeight,
-};
+} from './theme';
 
+// Services
 export {
   createScopedResolver,
   resolveVariable,
@@ -76,8 +69,14 @@ export { TouchableOpacity } from './components/TouchableOpacity';
 export { Video } from './components/Video';
 export { View } from './components/View';
 export { YearRangePicker } from './components/YearRangePicker';
+
+// Examples
 export { Examples } from './examples/components';
-export { Device, Keyboard } from './helpers';
+
+// Helpers
+export { calculateKeyboardOffset, Device, Keyboard } from './helpers';
+
+// HTML
 export { Html } from './html';
 export { SimpleHtml } from './html';
 
@@ -89,5 +88,7 @@ export {
   IPHONE_XR_LONG_SIDE,
   IPHONE_XR_NOTCH_PADDING,
   nativeDependencies,
+  NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  STATUS_BAR_OFFSET,
 } from './const';

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@shoutem/ui",
-  "version": "5.2.3",
+  "version": "5.3.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
     "postinstall": "node ./scripts/add-native-deps",
-    "test": "mocha '_tests_/*.js' --require react-native-mock-render/mock --require @babel/register"
+    "test": "jest"
   },
   "dependencies": {
-    "@react-native-community/datetimepicker": "3.5.2",
+    "@react-native-community/datetimepicker": "6.2.0",
     "@shoutem/animation": "~0.15.0",
     "@shoutem/eslint-config-react": "~1.0.6",
     "@shoutem/theme": "~0.13.0",
@@ -21,26 +21,26 @@
     "html-entities": "1.3.1",
     "htmlparser2": "3.10.1",
     "lodash": "4.17.21",
-    "lottie-react-native": "5.0.1",
+    "lottie-react-native": "5.1.3",
     "prop-types": "15.8.1",
     "qs": "6.9.3",
-    "react-native-device-info": "8.4.8",
+    "react-native-device-info": "9.0.2",
     "react-native-lightbox": "github:shoutem/react-native-lightbox#v0.7.2",
-    "react-native-linear-gradient": "2.5.6",
+    "react-native-linear-gradient": "2.6.2",
     "react-native-modal": "11.7.0",
-    "react-native-photo-view": "github:shoutem/react-native-photo-view#e7f0003",
+    "react-native-photo-view": "github:shoutem/react-native-photo-view#8f88667",
     "react-native-render-html": "4.2.5",
     "react-native-render-html-table-bridge": "0.6.0",
-    "react-native-svg": "12.1.1",
-    "react-native-svg-transformer": "0.14.3",
+    "react-native-svg": "12.3.0",
+    "react-native-svg-transformer": "1.0.0",
     "react-native-transformable-image": "github:shoutem/react-native-transformable-image#v0.0.20",
-    "react-native-webview": "11.0.3",
-    "react-native-youtube-iframe": "2.1.2",
+    "react-native-webview": "11.22.7",
+    "react-native-youtube-iframe": "2.2.2",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
+    "react": ">=16.9.0",
     "react-native": ">=0.61.5"
   },
   "devDependencies": {
@@ -49,8 +49,6 @@
     "@babel/plugin-proposal-decorators": "7.16.7",
     "@shoutem/eslint-config-react-native": "~1.0.2",
     "babel-eslint": "10.1.0",
-    "chai": "4.2.0",
-    "deep-freeze": "0.0.1",
     "eslint": "6.8.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
@@ -59,18 +57,19 @@
     "eslint-plugin-react-hooks": "4.2.0",
     "eslint-plugin-react-native": "3.11.0",
     "eslint-plugin-simple-import-sort": "7.0.0",
+    "jest": "27.5.1",
     "metro-react-native-babel-preset": "0.66.2",
-    "mocha": "7.1.2",
     "prettier": "1.19.1",
-    "react-addons-test-utils": "15.6.2",
-    "react-dom": "16.14.0",
-    "react-native-mock-render": "0.1.9"
+    "react": "17.0.2",
+    "react-dom": "16.9.0",
+    "react-native": "0.68.2",
+    "react-test-renderer": "17.0.2"
   },
   "nativeDependencies": [
     "@react-native-community/datetimepicker",
+    "lottie-react-native",
     "react-native-device-info",
     "react-native-linear-gradient",
-    "lottie-react-native",
     "react-native-photo-view",
     "react-native-svg",
     "react-native-webview"
@@ -115,5 +114,15 @@
     "jsxBracketSameLine": false,
     "singleQuote": true,
     "trailingComma": "all"
+  },
+  "jest": {
+    "preset": "react-native",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "examples/"
+    ],
+    "transformIgnorePatterns": [
+      "!/node_modules/@shoutem"
+    ]
   }
 }

package/theme.js

@@ -11,22 +11,15 @@ import {
   IPHONE_X_HOME_INDICATOR_PADDING,
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_NOTCH_PADDING,
+  NAVIGATION_BAR_HEIGHT,
   NAVIGATION_HEADER_HEIGHT,
+  STATUS_BAR_OFFSET,
 } from './const';
 import { Device } from './helpers';
 import { resolveVariable } from './services';
 
 const window = Dimensions.get('window');
 
-const STATUS_BAR_OFFSET =
-  Platform.OS === 'android' ? -StatusBar.currentConfig : 0;
-export const NAVIGATION_BAR_HEIGHT = Device.select({
-  iPhoneX: NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING,
-  iPhoneXR: NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING,
-  notchedAndroid: NAVIGATION_HEADER_HEIGHT + StatusBar.currentHeight,
-  default: NAVIGATION_HEADER_HEIGHT,
-});
-
 export const sizeVariants = [
   '',
   'left',