feat(theme): eva integration (#227)

* feat(theme): style provider cache service

* refactor(theme) adopt to eva exports

* refactor(theme): move app container -> style provider

* refactor(theme): split style specs

* refactor(theme): split theme specs

* refactor(theme): move types to common type file

* refactor(theme): expect style values to match snapshot

* test(theme): fix radio snapshot

* test(theme): add style consumer uncovered cases tests

* build(package): update eva dependency

* refactor(framework): adopt to eva package

* refactor(playground): adopt to eva package

* refactor(framework): adopt to eva package

* refactor(theme): style creation to style consumer service

* refactor(package): adopt to eva exports

* refactor(framework): code re-arrange

* fix(package): update eva dependency path

jest.config.js

@@ -22,6 +22,13 @@ module.exports = {
     prefix: '<rootDir>/',
   }),
   modulePathIgnorePatterns: [
-    '<rootDir>/src/playground/'
+    '<rootDir>/src/playground/',
+  ],
+  testPathIgnorePatterns: [
+    '<rootDir>/dist',
+    '<rootDir>/node_modules',
+  ],
+  transformIgnorePatterns: [
+    'node_modules/(?!(react-native|react-native-cookies|eva)/)'
   ],
 };

package.json

@@ -27,6 +27,10 @@
     "ci:test": "npm test -- --coverage && cat ./dist/jest/coverage/lcov.info | coveralls",
     "test": "jest"
   },
+  "dependencies": {
+    "eva": "github:akveo/eva",
+    "hoist-non-react-statics": "^3.2.1"
+  },
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/runtime": "^7.1.2",
@@ -52,8 +56,5 @@
     "ts-jest": "^23.10.5",
     "tslint": "^5.11.0",
     "typescript": "^3.1.6"
-  },
-  "dependencies": {
-    "hoist-non-react-statics": "^3.2.1"
   }
 }

src/framework/theme/component/mapping/index.ts

@@ -1,4 +1,3 @@
-export * from './type';
 export * from './mappingContext';
 export {
   MappingProvider,

src/framework/theme/component/mapping/mapping.spec.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View } from 'react-native';
+import { render } from 'react-native-testing-library';
+import {
+  ThemeMappingType,
+  ThemeMapType,
+} from 'eva/packages/common';
+import {
+  MappingContext,
+  MappingContextValueType,
+} from './mappingContext';
+import {
+  MappingProvider,
+  Props as MappingProviderProps,
+} from './mappingProvider.component';
+
+describe('@mapping: ui component checks', () => {
+
+  const json = (object: any) => JSON.stringify(object);
+
+  const Provider = (props: MappingProviderProps): React.ReactElement<MappingProviderProps> => (
+    <MappingProvider {...props}/>
+  );
+
+  const withMapping = (Component: React.ComponentClass<any>): React.ReactElement<any> => (
+    <MappingContext.Consumer>{(receivedValue: MappingContextValueType) => (
+      <Component
+        testID='@mapping/consumer'
+        mapping={receivedValue.mapping}
+        styles={receivedValue.styles}/>
+    )}</MappingContext.Consumer>
+  );
+
+  interface Props {
+    mapping: ThemeMappingType;
+    styles: any;
+  }
+
+  const Tree = (props: Props) => (
+    <Provider mapping={props.mapping} styles={props.styles}>
+      {withMapping(View)}
+    </Provider>
+  );
+
+  describe('* consumer', () => {
+    const mapping: ThemeMappingType = {};
+    const styles: ThemeMapType = {};
+
+    it('receives mapping prop', () => {
+
+      const component = render(<Tree mapping={mapping} styles={styles}/>);
+      const consumerComponent = component.getByTestId('@mapping/consumer');
+
+      expect(json(consumerComponent.props.mapping)).toEqual(json(mapping));
+    });
+
+    it('receives styles prop', () => {
+
+      const component = render(<Tree mapping={mapping} styles={styles}/>);
+      const consumerComponent = component.getByTestId('@mapping/consumer');
+
+      expect(json(consumerComponent.props.styles)).toEqual(json(styles));
+    });
+
+  });
+
+});

src/framework/theme/component/mapping/mappingContext.ts

@@ -1,6 +1,17 @@
 import React from 'react';
-import { ThemeMappingType } from './type';
+import {
+  ThemeMappingType,
+  ThemeMapType,
+} from 'eva/packages/common';
 
-const defaultValue: ThemeMappingType = {};
+export interface MappingContextValueType {
+  mapping: ThemeMappingType;
+  styles: ThemeMapType;
+}
+
+const defaultValue: MappingContextValueType = {
+  mapping: {},
+  styles: {},
+};
 
 export const MappingContext = React.createContext(defaultValue);

src/framework/theme/component/mapping/mappingProvider.component.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
+import {
+  ThemeMappingType,
+  ThemeMapType,
+} from 'eva/packages/common';
 import { MappingContext } from './mappingContext';
-import { ThemeMappingType } from './type';
 
 export interface Props {
   mapping: ThemeMappingType;
+  styles: ThemeMapType;
   children: JSX.Element | React.ReactNode;
 }
 
@@ -12,7 +16,7 @@ export class MappingProvider extends React.PureComponent<Props> {
   render() {
     return (
       <MappingContext.Provider
-        value={this.props.mapping}>
+        value={{ mapping: this.props.mapping, styles: this.props.styles }}>
         {this.props.children}
       </MappingContext.Provider>
     );

src/framework/theme/component/style/index.ts

@@ -1,4 +1,3 @@
-export * from './type';
 export {
   StyleProvider,
   Props as StyleProviderProps,

src/framework/theme/service/mapping/mapping.spec.config.ts → src/framework/theme/component/style/style.spec.config.ts

@@ -1,20 +1,40 @@
-export const mapping = {
+import { ThemeMappingType } from 'eva/packages/common';
+import { ThemeType } from '../../type';
+
+export const mapping: ThemeMappingType = {
   Test: {
+    meta: {
+      variants: {
+        status: [
+          'success',
+          'info',
+        ],
+        size: [
+          'small',
+          'big',
+        ],
+      },
+      states: [
+        'checked',
+        'disabled',
+        'active',
+      ],
+    },
     appearance: {
       default: {
         mapping: {
           size: 36,
-            innerSize: 24,
-            borderWidth: 2,
-            borderColor: 'grayPrimary',
-            selectColor: 'transparent',
-            state: {
+          innerSize: 24,
+          borderWidth: 2,
+          borderColor: 'grayPrimary',
+          selectColor: 'transparent',
+          state: {
             active: {
               borderColor: 'grayDark',
             },
             checked: {
               borderColor: 'bluePrimary',
-                selectColor: 'bluePrimary',
+              selectColor: 'bluePrimary',
             },
             disabled: {
               borderColor: 'grayLight',
@@ -34,7 +54,7 @@ export const mapping = {
                 state: {
                   checked: {
                     borderColor: 'orangePrimary',
-                      selectColor: 'orangePrimary',
+                    selectColor: 'orangePrimary',
                   },
                   'active.checked': {
                     borderColor: 'orangeDark',
@@ -47,7 +67,7 @@ export const mapping = {
                 state: {
                   checked: {
                     borderColor: 'tealPrimary',
-                      selectColor: 'tealPrimary',
+                    selectColor: 'tealPrimary',
                   },
                   'active.checked': {
                     borderColor: 'tealDark',
@@ -60,13 +80,13 @@ export const mapping = {
             big: {
               mapping: {
                 size: 42,
-                  innerSize: 28,
+                innerSize: 28,
               },
             },
             small: {
               mapping: {
                 size: 30,
-                  innerSize: 20,
+                innerSize: 20,
               },
             },
           },
@@ -75,7 +95,7 @@ export const mapping = {
       custom: {
         mapping: {
           borderWidth: 4,
-            state: {
+          state: {
             active: {
               borderColor: 'grayLight',
             },
@@ -94,6 +114,34 @@ export const mapping = {
     },
   },
   Empty: {
+    meta: {
+      variants: {},
+      states: [],
+    },
     appearance: {},
   },
 };
+
+export const theme: ThemeType = {
+  grayLight: '#E0E0E0',
+  grayPrimary: '#9E9E9E',
+  grayDark: '#616161',
+  bluePrimary: '#2196F3',
+  blueDark: '#1976D2',
+  orangePrimary: '#FF9800',
+  orangeDark: '#F57C00',
+  tealPrimary: '#009688',
+  tealDark: '#00796B',
+};
+
+export const themeInverse: ThemeType = {
+  grayLight: '#616161',
+  grayPrimary: '#9E9E9E',
+  grayDark: '#E0E0E0',
+  bluePrimary: '#2196F3',
+  blueDark: '#1976D2',
+  orangePrimary: '#FF9800',
+  orangeDark: '#F57C00',
+  tealPrimary: '#009688',
+  tealDark: '#00796B',
+};