Merge branch 'master' of github.com:platformbuilders/helpers

jest.config.js

@@ -17,10 +17,10 @@ module.exports = {
   testMatch: ['**/__tests__/*.spec.+(ts|tsx)'],
   coverageThreshold: {
     global: {
-      branches: 50,
-      functions: 70,
-      lines: 75,
-      statements: 75,
+      branches: 80,
+      functions: 90,
+      lines: 90,
+      statements: 90,
     },
   },
   unmockedModulePathPatterns: ['react'],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/helpers",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Builders helpers library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -46,8 +46,8 @@
     "react": ">=18",
     "react-dom": ">=18",
     "react-native": ">=0.69.3",
-    "react-native-device-info": ">=10.4.0",
     "react-native-haptic": ">=1.0.1",
+    "react-native-safe-area-context": ">=4.5.3",
     "react-native-size-matters": ">=0.3.0",
     "styled-components": ">=5"
   },
@@ -61,6 +61,8 @@
     "@babel/preset-react": "7.18.6",
     "@babel/runtime": "7.20.1",
     "@platformbuilders/eslint-config-builders": "^0.1.2",
+    "@platformbuilders/theme-toolkit": "^0.2.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/dompurify": "^2.4.0",
     "@types/jest": "29.2.3",
     "@types/lodash": "4.14.189",
@@ -69,6 +71,7 @@
     "@types/react-dom": "18.0.9",
     "@types/react-native": "0.70.6",
     "@types/styled-components": "5.1.26",
+    "@types/styled-components-react-native": "5.1.3",
     "@typescript-eslint/eslint-plugin": "5.43.0",
     "@typescript-eslint/parser": "5.43.0",
     "babel-jest": "29.3.1",
@@ -94,13 +97,16 @@
     "mz": "2.7.0",
     "numeral": "2.0.6",
     "prettier": "2.7.1",
+    "react": "18.2.0",
     "react-native": "0.70.6",
-    "react-native-device-info": "10.4.0",
     "react-native-haptic": "1.0.1",
+    "react-native-safe-area-context": "^4.5.3",
     "react-native-size-matters": "0.4.0",
+    "react-test-renderer": "18.2.0",
     "rmfr": "2.0.0",
     "rollup": "3.3.0",
     "rollup-plugin-typescript2": "0.34.1",
+    "styled-components": "^5.3.6",
     "ts-jest": "29.0.3",
     "typescript": "4.9.3",
     "uglify-js": "3.17.4"

src/index.ts

@@ -1 +1,9 @@
+import 'styled-components';
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    white: string;
+  }
+}
+
 export * from './web';

src/native/__tests__/useSpacingsWithSafeArea.spec.ts

@@ -0,0 +1,35 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useSpacingsWithSafeArea } from '../useSpacingsWithSafeArea';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useContext: () => ({
+    spacing: {
+      lg: 24,
+      sm: 8,
+    },
+  }),
+}));
+
+jest.mock('react-native-safe-area-context', () => {
+  const {
+    default: mockSafeAreaContext,
+  } = require('react-native-safe-area-context/jest/mock');
+  return mockSafeAreaContext;
+});
+
+describe('useSpacingsWithSafeArea', () => {
+  test("should return spacing lg value when don't have safe area value", async () => {
+    const { result } = renderHook(() => useSpacingsWithSafeArea());
+
+    expect(result.current.topSpacing).toBe(24);
+    expect(result.current.bottomSpacing).toBe(24);
+  });
+
+  test('should return spacing sm value when pass sm as parameter', async () => {
+    const { result } = renderHook(() => useSpacingsWithSafeArea('sm'));
+
+    expect(result.current.topSpacing).toBe(8);
+    expect(result.current.bottomSpacing).toBe(8);
+  });
+});

src/native/index.ts

@@ -3,4 +3,4 @@ export * from './isIOS';
 export * from './generateHaptic';
 export * from './getShadow';
 export * from '../shared';
-export * from './iphoneHelper';
+export * from './useSpacingsWithSafeArea';

src/native/useSpacingsWithSafeArea.ts

@@ -0,0 +1,38 @@
+import { useContext, useEffect, useState } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ThemeContext } from 'styled-components/native';
+import { FluidTheme } from '@platformbuilders/theme-toolkit';
+
+export type SpacingValue =
+  | 'min'
+  | 'xxs'
+  | 'xs'
+  | 'sm'
+  | 'md'
+  | 'lg'
+  | 'xl'
+  | 'xxl'
+  | 'max';
+
+export const useSpacingsWithSafeArea = (customSpacing: SpacingValue = 'lg') => {
+  const { bottom, top } = useSafeAreaInsets();
+  const themeContext: unknown = useContext(ThemeContext);
+  const [spacings, setSpacings] = useState({
+    topSpacing: 0,
+    bottomSpacing: 0,
+  });
+  const themeFluid = themeContext as FluidTheme;
+  const spacingFluid = themeFluid.spacing[customSpacing];
+
+  useEffect(() => {
+    setSpacings({
+      topSpacing: top + spacingFluid,
+      bottomSpacing: bottom + spacingFluid,
+    });
+  }, [bottom, top]);
+
+  return {
+    topSpacing: spacings.topSpacing,
+    bottomSpacing: spacings.bottomSpacing,
+  };
+};

src/__tests__/addMaskToCardNumber.spec.ts → src/shared/__tests__/addMaskToCardNumber.spec.ts

@@ -1,4 +1,4 @@
-import { addMaskToCardNumber } from '../shared/addMaskToCardNumber';
+import { addMaskToCardNumber } from '../addMaskToCardNumber';
 
 const expected = '**** **** **** 1234';
 

src/__tests__/base64.spec.ts → src/shared/__tests__/base64.spec.ts

@@ -1,4 +1,4 @@
-import { formatToBase64 } from '../shared/base64';
+import { formatToBase64 } from '../base64';
 
 describe('base64 helpers tests', () => {
   it('should return a formatted string when no string sent', () => {

src/__tests__/currencyParser.spec.ts → src/shared/__tests__/currencyParser.spec.ts

@@ -1,4 +1,4 @@
-import { currencyParser } from '../shared/currencyParser';
+import { currencyParser } from '../currencyParser';
 
 describe('currencyParser tests', () => {
   describe('with string', () => {

src/__tests__/currencyToNumber.spec.ts → src/shared/__tests__/currencyToNumber.spec.ts

@@ -1,4 +1,4 @@
-import { currencyToNumber } from '../shared/currencyToNumber';
+import { currencyToNumber } from '../currencyToNumber';
 
 describe('currencyToNumber tests', () => {
   it('should parse to thousands', () => {

src/__tests__/formatCardNumber.spec.ts → src/shared/__tests__/formatCardNumber.spec.ts

@@ -1,4 +1,4 @@
-import { formatCardNumber } from '../shared/formatCardNumber';
+import { formatCardNumber } from '../formatCardNumber';
 
 describe('formatCardNumber tests', () => {
   it('should apply mask credit card number 5363 5085 9979 9238', () => {

src/__tests__/formatToMonogram.spec.ts → src/shared/__tests__/formatToMonogram.spec.ts

@@ -1,4 +1,4 @@
-import { formatToMonogram } from '../shared/formatToMonogram';
+import { formatToMonogram } from '../formatToMonogram';
 
 describe('formatToMonogram tests', () => {
   it('should format to monogram', () => {

src/__tests__/formatToPhone.spec.ts → src/shared/__tests__/formatToPhone.spec.ts

@@ -1,4 +1,4 @@
-import { formatToPhone } from '../shared/formatToPhone';
+import { formatToPhone } from '../formatToPhone';
 
 const expected = '(11) 99999-8888';
 

src/__tests__/parseToThousands.spec.ts → src/shared/__tests__/parseToThousands.spec.ts

@@ -1,4 +1,4 @@
-import { parseToThousands } from '../shared/parseToThousands';
+import { parseToThousands } from '../parseToThousands';
 
 describe('parseToThousands tests', () => {
   it('should parse to thousands', () => {

src/__tests__/removeWhiteSpaces.spec.ts → src/shared/__tests__/removeWhiteSpaces.spec.ts

@@ -1,4 +1,4 @@
-import { removeWhiteSpaces } from '../shared/removeWhiteSpaces';
+import { removeWhiteSpaces } from '../removeWhiteSpaces';
 
 describe('removeWhiteSpaces tests', () => {
   it('should remove white empty spaces properly', () => {

src/__tests__/sanitizer.spec.ts → src/shared/__tests__/sanitizer.spec.ts

@@ -1,4 +1,4 @@
-import { isSecureLink, sanitizeValues } from '../shared/sanitizer';
+import { isSecureLink, sanitizeValues } from '../sanitizer';
 
 describe('Sanitizer', () => {
   describe('isSecureLink', () => {

src/__tests__/toOnlyNumbers.spec.ts → src/shared/__tests__/toOnlyNumbers.spec.ts

@@ -1,4 +1,4 @@
-import { toOnlyNumbers } from '../shared/toOnlyNumbers';
+import { toOnlyNumbers } from '../toOnlyNumbers';
 
 describe('toOnlyNumbers tests', () => {
   it('should format to string empty properly', () => {

tsconfig.json

@@ -4,7 +4,7 @@
     "target": "es6",
     "module": "es6",
     "lib": ["esnext", "DOM"],
-    "types": ["react", "jest"],
+    "types": ["react", "jest", "@types/styled-components-react-native"],
     "jsx": "react",
     "declaration": true,
     "declarationMap": true,
@@ -22,7 +22,6 @@
     "strictPropertyInitialization": true,
     "noImplicitThis": true,
     "alwaysStrict": true,
-    "suppressImplicitAnyIndexErrors": true,
     /* Additional Checks */
     "noUnusedLocals": true,
     "noUnusedParameters": true,