feat(hooks): implement useNavigation hook

- chore(typescript): cleanup tsconfig.json file
- feat(hooks): create a context to hold componentId value
- feat(hooks): create HOC to provide compoent id context
- feat(hooks): create navigation helpers to reduce boilerplate
- feat(hooks): create useNavigation hook to expose navigationHelpers
- feat(hooks): create useComponentId hook

Author: jpgarcia

package.json

@@ -23,18 +23,26 @@
     "react-native-navigation": ">=6.5.0"
   },
   "scripts": {
+    "build": "tsc",
+    "clean:dist": "rm -rf dist",
     "lint": "eslint src",
-    "build": "rm -rf ./dist && tsc",
+    "prebuild": "yarn clean:dist",
+    "prepare": "yarn build",
     "test": "jest src",
     "test:coverage": "jest --coverage",
     "release": "semantic-release"
   },
+  "dependencies": {
+    "hoist-non-react-statics": "3.3.2"
+  },
   "devDependencies": {
     "@react-native-community/eslint-config": "2.0.0",
     "@semantic-release/changelog": "5.0.1",
     "@semantic-release/git": "9.0.0",
     "@semantic-release/npm": "7.0.5",
     "@testing-library/react-hooks": "3.4.1",
+    "@testing-library/react-native": "7.0.1",
+    "@types/hoist-non-react-statics": "3.3.1",
     "@types/jest": "26.0.9",
     "@types/react": "16.9.19",
     "@types/react-native": "0.63.6",
@@ -46,6 +54,7 @@
     "eslint-plugin-react-native": "3.8.1",
     "husky": "4.2.5",
     "jest": "26.2.2",
+    "lint-staged": "10.2.11",
     "metro-react-native-babel-preset": "0.61.0",
     "prettier": "2.0.5",
     "react": "16.13.1",
@@ -71,10 +80,14 @@
   "jest": {
     "preset": "react-native"
   },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": "yarn eslint"
+  },
   "husky": {
     "hooks": {
       "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
-      "pre-push": "yarn lint && yarn test"
+      "pre-commit": "yarn lint-staged && yarn test",
+      "pre-push": "yarn tsc && yarn lint --quiet && yarn test"
     }
   },
   "config": {

src/contexts/ComponentIdContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+const ComponentIdContext = createContext<string | undefined>(undefined)
+
+export const ComponentIdProvider = ComponentIdContext.Provider
+export const ComponentIdConsumer = ComponentIdContext.Consumer
+
+export default ComponentIdContext

src/contexts/index.ts

@@ -0,0 +1 @@
+export { default as ComponentIdContext } from './ComponentIdContext'

src/helpers/createLayout.test.ts

@@ -0,0 +1,64 @@
+import createLayout from './createLayout'
+
+describe('createLayout', () => {
+  it('should create a layout passing name', () => {
+    const layout = createLayout('componentName')
+
+    expect(layout).toEqual({
+      component: {
+        name: 'componentName',
+      },
+    })
+  })
+
+  it('should create a layout passing name and props', () => {
+    const layout = createLayout('componentName', { prop1: 'value1' })
+    expect(layout).toEqual({
+      component: {
+        name: 'componentName',
+        passProps: {
+          prop1: 'value1',
+        },
+      },
+    })
+  })
+
+  it('should create a layout passing name and options', () => {
+    const layout = createLayout('componentName', undefined, { popGesture: true })
+
+    expect(layout).toEqual({
+      component: {
+        name: 'componentName',
+        options: {
+          popGesture: true,
+        },
+      },
+    })
+  })
+
+  it('should create a layout passing name props and options', () => {
+    const layout = createLayout('componentName', { prop1: 'value1' }, { popGesture: true })
+
+    expect(layout).toEqual({
+      component: {
+        name: 'componentName',
+        passProps: {
+          prop1: 'value1',
+        },
+        options: {
+          popGesture: true,
+        },
+      },
+    })
+  })
+
+  it('should create a layout and remove the passProps and options when fields are null', () => {
+    const layout = createLayout('componentName', null, null)
+
+    expect(layout).toEqual({
+      component: {
+        name: 'componentName',
+      },
+    })
+  })
+})

src/helpers/createLayout.ts

@@ -0,0 +1,30 @@
+import { Options, Layout } from 'react-native-navigation'
+
+/**
+ * Creates basic navigation Layout only with component field.
+ * [more info](https://wix.github.io/react-native-navigation/api/layout-component)
+ */
+function createLayout<P>(
+  /**
+   * Name of your component
+   */
+  name: string,
+  /**
+   * Properties to pass down to the component
+   */
+  passProps?: P,
+  /**
+   * Styling options
+   */
+  options?: Options
+): Layout<P> {
+  return {
+    component: {
+      name,
+      passProps: passProps ? passProps : undefined,
+      options: options ? options : undefined,
+    },
+  }
+}
+
+export default createLayout