feat(codebase): react native support (#153)

re #148, re #137, re #106, re #89, re #16, re #6

* build(rollup): native bundle

* feat(native): stylized components

* build(typescript): react native check

* feat(typing): improves

* build(tsconfig): by environment

* test(web native): setup

* test(native): support

* docs(readme): native documentation

Author: danilowoz

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "react-app",
+  "rules": {
+    "@typescript-eslint/no-angle-bracket-type-assertion": 0 // I don't know wtf it is
+  }
+}

.gitignore

@@ -9,6 +9,7 @@ yarn-error.log
 node_modules
 dist
 coverage
+/native
 .docz/
 .rpt2_cache
 settings.json

.travis.yml

@@ -1,16 +1,14 @@
 language: node_js
 sudo: false
 node_js:
-  - 9
+  - 10
 cache:
   directories:
     - node_modules
 install:
   - npm install
-  - npm install -g codecov
 script:
   - npm run test
   - npm run build
 after_success:
-  - npm run coverage
   - npm run release

README.md

@@ -0,0 +1,18 @@
+jest.mock('Animated', () => {
+  return {
+    Value: () => {
+      return {
+        addListener: callback => callback({ value: 0 }),
+        setValue: () => {},
+      }
+    },
+    timing: (value, config) => {
+      return {
+        start: callback => {
+          value.setValue(config.toValue)
+          callback && callback()
+        },
+      }
+    },
+  }
+})

__mocks__/jestSetupFile.js

@@ -0,0 +1,64 @@
+import React from 'react';
+
+const createComponent = function(name) {
+  return class extends React.Component {
+    // overwrite the displayName, since this is a class created dynamically
+    static displayName = name;
+
+    render() {
+      return React.createElement(name, this.props, this.props.children);
+    }
+  };
+};
+
+// Mock all react-native-svg exports
+// from https://github.com/magicismight/react-native-svg/blob/master/index.js
+const Svg = createComponent('Svg');
+const Circle = createComponent('Circle');
+const Ellipse = createComponent('Ellipse');
+const G = createComponent('G');
+const Text = createComponent('Text');
+const TextPath = createComponent('TextPath');
+const TSpan = createComponent('TSpan');
+const Path = createComponent('Path');
+const Polygon = createComponent('Polygon');
+const Polyline = createComponent('Polyline');
+const Line = createComponent('Line');
+const Rect = createComponent('Rect');
+const Use = createComponent('Use');
+const Image = createComponent('Image');
+const Symbol = createComponent('Symbol');
+const Defs = createComponent('Defs');
+const LinearGradient = createComponent('LinearGradient');
+const RadialGradient = createComponent('RadialGradient');
+const Stop = createComponent('Stop');
+const ClipPath = createComponent('ClipPath');
+const Pattern = createComponent('Pattern');
+const Mask = createComponent('Mask');
+
+export {
+  Svg,
+  Circle,
+  Ellipse,
+  G,
+  Text,
+  TextPath,
+  TSpan,
+  Path,
+  Polygon,
+  Polyline,
+  Line,
+  Rect,
+  Use,
+  Image,
+  Symbol,
+  Defs,
+  LinearGradient,
+  RadialGradient,
+  Stop,
+  ClipPath,
+  Pattern,
+  Mask,
+};
+
+export default Svg;

__mocks__/react-native-svg.js

@@ -15,7 +15,7 @@ import ContentLoader, {
 
 ## Usage
 
-## Different Type of Loaders
+## Presets
 
 ### Facebook Style Loader
 

.babelrc.js renamed to babel.web.config.js

@@ -0,0 +1,23 @@
+const { defaults: tsjPreset } = require('ts-jest/presets')
+
+module.exports = {
+  ...tsjPreset,
+  preset: "react-native",
+  collectCoverage: true,
+  coverageDirectory: './coverage/native',
+  "transformIgnorePatterns": [
+    "/node_modules/(?!react-native|react-clone-referenced-element|react-navigation)"
+  ],
+  transform: {
+    ...tsjPreset.transform,
+    '^.+\\.js$': require.resolve('react-native/jest/preprocessor.js'),
+  },
+  testRegex: '/src/native/__tests__/.*(\\.|/)(test|spec)\\.[jt]sx?$',
+  setupFiles: ['./__mocks__/jestSetupFile.js'],
+  globals: {
+    'ts-jest': {
+      babelConfig: false,
+      tsConfig: 'tsconfig.test.json',
+    },
+  },
+};

docs/usage.mdx

@@ -0,0 +1,17 @@
+module.exports = {
+  verbose: true,
+  collectCoverage: true,
+  coverageDirectory: './coverage/',
+  transform: {
+    '^.+\\.(t|j)sx?$': 'ts-jest',
+  },
+  testRegex: '/src/__tests__/.*(\\.|/)(test|spec)\\.[jt]sx?$',
+  roots: ['<rootDir>/src'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  globals: {
+    'ts-jest': {
+      babelConfig: false,
+      tsConfig: 'tsconfig.test.json',
+    },
+  },
+}