fix(ui): adopt to eva (#397)

akveo · May 21, 2019 · 1b90281 · 1b90281
1 parent caf7a7e
commit 1b90281
Show file tree

Hide file tree

Showing 18 changed files with 725 additions and 583 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -21,6 +21,6 @@ before_install:
 - eval "$(ssh-agent -s)"
 - DISPLAY=":0.0" SSH_ASKPASS="/tmp/askpass" setsid ssh-add /tmp/travis_deploy_key </dev/null
 install:
-- npm install
+- npm run ci:install
 script:
 - scripts/ci/travis-ci-script.sh
diff --git a/config/dev.env.js b/config/dev.env.js
@@ -7,4 +7,5 @@ module.exports = {
   KITTEN_PATH: path.resolve(__dirname, '../src/framework'),
   MAPPING_PATH: path.resolve(evaPath, 'packages/mapping/eva'),
   THEME_PATH: path.resolve(evaPath, 'packages/theme/eva'),
+  PROCESSOR_PATH: path.resolve(evaPath, 'packages/processor/kitten')
 };
diff --git a/config/prod.env.js b/config/prod.env.js
@@ -7,4 +7,5 @@ module.exports = {
   KITTEN_PATH: path.resolve(__dirname, '../src/framework'),
   MAPPING_PATH: path.resolve(playgroundPath, 'node_modules/@eva/eva'),
   THEME_PATH: path.resolve(playgroundPath, 'node_modules/@eva/theme-eva'),
+  PROCESSOR_PATH: path.resolve(__dirname, '../node_modules/@eva/processor-kitten')
 };
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   },
   "scripts": {
     "start": "npm run start:pg:dev",
-    "start:pg": "npm start --prefix ./src/playground",
+    "start:pg": "npm run install:pg && npm start --prefix ./src/playground",
     "start:pg:prod": "npm run env:set -- prod && npm run start:pg",
     "start:pg:dev": "npm run env:set -- dev && npm run start:pg",
     "env:set": "sh ./scripts/environment/set-env.sh",
@@ -24,11 +24,11 @@
     "lint": "npm run lint:src && npm run lint:pg",
     "lint:src": "tslint -p ./src/framework/tsconfig.json --fix",
     "lint:pg": "tslint -p ./src/playground/tsconfig.json --fix",
+    "ci:install": "npm i && npm run install:pg",
     "ci:lint": "npm run lint",
     "ci:build": "npm run build:src && npm run build:pg",
     "ci:test": "npm t -- --coverage && cat ./dist/jest/coverage/lcov.info | coveralls",
     "install:pg": "( cd ./src/playground && npm i )",
-    "install": "npm run install:pg",
     "test": "jest"
   },
   "dependencies": {

diff --git a/src/framework/ui/buttonGroup/buttonGroup.component.tsx b/src/framework/ui/buttonGroup/buttonGroup.component.tsx
@@ -25,9 +25,9 @@ type ButtonElement = React.ReactElement<ButtonProps>;
 type ChildrenProp = ButtonElement | ButtonElement[];
 
 interface ComponentProps {
-  children: ChildrenProp;
   size?: string;
   status?: string;
+  children: ChildrenProp;
 }
 
 export type ButtonGroupProps = StyledComponentProps & ViewProps & ComponentProps;
@@ -85,8 +85,8 @@ class ButtonGroupComponent extends React.Component<ButtonGroupProps> {
     const { style } = this.props;
 
     const {
-      buttonBorderRightColor,
-      buttonBorderRightWidth,
+      dividerBackgroundColor,
+      dividerWidth,
       ...containerParameters
     } = source;
 
@@ -97,8 +97,8 @@ class ButtonGroupComponent extends React.Component<ButtonGroupProps> {
         ...StyleSheet.flatten(style),
       },
       button: {
-        borderRightColor: buttonBorderRightColor,
-        borderRightWidth: buttonBorderRightWidth,
+        borderRightColor: dividerBackgroundColor,
+        borderRightWidth: dividerWidth,
         ...styles.button,
       },
     };

diff --git a/src/framework/ui/checkbox/checkbox.component.tsx b/src/framework/ui/checkbox/checkbox.component.tsx
@@ -159,10 +159,10 @@ class CheckBoxComponent extends React.Component<CheckBoxProps> {
       iconHeight,
       iconBorderRadius,
       iconTintColor,
-      highlightWidth,
-      highlightHeight,
-      highlightBorderRadius,
-      highlightBackgroundColor,
+      outlineWidth,
+      outlineHeight,
+      outlineBorderRadius,
+      outlineBackgroundColor,
       ...containerParameters
     } = source;
 
@@ -192,10 +192,10 @@ class CheckBoxComponent extends React.Component<CheckBoxProps> {
         backgroundColor: iconTintColor,
       },
       highlight: {
-        width: highlightWidth,
-        height: highlightHeight,
-        borderRadius: highlightBorderRadius,
-        backgroundColor: highlightBackgroundColor,
+        width: outlineWidth,
+        height: outlineHeight,
+        borderRadius: outlineBorderRadius,
+        backgroundColor: outlineBackgroundColor,
         ...styles.highlight,
       },
     };

diff --git a/src/framework/ui/input/input.component.tsx b/src/framework/ui/input/input.component.tsx
@@ -30,9 +30,9 @@ import {
   isValidString,
 } from '../support/services';
 import {
-  InputFocusEvent,
-  InputEndEditEvent,
   FlexStyleProps,
+  InputEndEditEvent,
+  InputFocusEvent,
 } from '../support/typings';
 
 type TextElement = React.ReactElement<TextProps>;
@@ -180,6 +180,7 @@ export class InputComponent extends React.Component<InputProps> {
       textMarginHorizontal,
       textFontSize,
       textLineHeight,
+      textFontWeight,
       textColor,
       iconWidth,
       iconHeight,
@@ -191,10 +192,10 @@ export class InputComponent extends React.Component<InputProps> {
       labelMarginBottom,
       labelFontWeight,
       captionMarginTop,
-      captionTextColor,
-      captionTextFontSize,
-      captionTextLineHeight,
-      captionTextFontWeight,
+      captionColor,
+      captionFontSize,
+      captionLineHeight,
+      captionFontWeight,
       captionIconWidth,
       captionIconHeight,
       captionIconMarginRight,
@@ -219,7 +220,9 @@ export class InputComponent extends React.Component<InputProps> {
       text: {
         marginHorizontal: textMarginHorizontal,
         fontSize: textFontSize,
-        lineHeight: textLineHeight,
+        // FIXME: RN issue (https://github.com/facebook/react-native/issues/7823)
+        // lineHeight: textLineHeight,
+        fontWeight: textFontWeight,
         color: textColor,
         ...styles.text,
         ...StyleSheet.flatten(textStyle),
@@ -248,10 +251,10 @@ export class InputComponent extends React.Component<InputProps> {
         ...styles.captionIcon,
       },
       captionLabel: {
-        fontSize: captionTextFontSize,
-        fontWeight: captionTextFontWeight,
-        lineHeight: captionTextLineHeight,
-        color: captionTextColor,
+        fontSize: captionFontSize,
+        fontWeight: captionFontWeight,
+        lineHeight: captionLineHeight,
+        color: captionColor,
         ...styles.captionLabel,
         ...StyleSheet.flatten(captionTextStyle),
       },

diff --git a/src/framework/ui/list/listItem.component.tsx b/src/framework/ui/list/listItem.component.tsx
@@ -175,6 +175,7 @@ export class ListItemComponent extends React.Component<ListItemProps> {
       titleFontWeight,
       titleColor,
       descriptionFontSize,
+      descriptionFontWeight,
       descriptionLineHeight,
       descriptionColor,
       descriptionMarginHorizontal,
@@ -207,6 +208,7 @@ export class ListItemComponent extends React.Component<ListItemProps> {
       description: {
         color: descriptionColor,
         fontSize: descriptionFontSize,
+        fontWeight: descriptionFontWeight,
         lineHeight: descriptionLineHeight,
         marginHorizontal: descriptionMarginHorizontal,
         ...styles.description,

diff --git a/src/framework/ui/overflowMenu/overflowMenu.component.tsx b/src/framework/ui/overflowMenu/overflowMenu.component.tsx
@@ -10,6 +10,7 @@ import {
   View,
   GestureResponderEvent,
   StyleSheet,
+  ViewStyle,
 } from 'react-native';
 import {
   StyledComponentProps,
@@ -110,22 +111,20 @@ export class OverflowMenuComponent extends React.Component<OverflowMenuProps> {
 
   private getComponentStyle = (style: StyleType): StyleType => {
     const {
-      popoverBorderRadius,
-      popoverBackgroundColor,
-      itemBorderBottomWidth,
-      itemBorderBottomColor,
+      dividerHeight,
+      dividerBackgroundColor,
+      ...containerParameters
     } = style;
 
     return {
       popover: {
-        borderRadius: popoverBorderRadius,
-        backgroundColor: popoverBackgroundColor,
+        ...containerParameters,
         ...styles.popover,
       },
-      item: {
-        borderBottomWidth: itemBorderBottomWidth,
-        borderBottomColor: itemBorderBottomColor,
-        ...styles.item,
+      item: styles.item,
+      divider: {
+        height: dividerHeight,
+        backgroundColor: dividerBackgroundColor,
       },
     };
   };
@@ -148,18 +147,23 @@ export class OverflowMenuComponent extends React.Component<OverflowMenuProps> {
 
   private renderContentElementChildren = (style: StyleType): MenuItemElement[] => {
     return this.props.items.map((item: OverflowMenuItemProps, index: number) => {
-      const itemElement: MenuItemElement = this.renderItemElement(item, index, style);
+      const itemElement: MenuItemElement = this.renderItemElement(item, index, style.item);
 
-      const borderBottomWidth: number = this.isLastItem(index) ? 0 : style.borderBottomWidth;
+      const isLastItem: boolean = this.isLastItem(index);
+
+      const borderStyle: ViewStyle = {
+        borderBottomColor: style.divider.backgroundColor,
+        borderBottomWidth: isLastItem ? 0 : style.divider.height,
+      };
 
       return React.cloneElement(itemElement, {
-        style: [itemElement.props.style, { borderBottomWidth }],
+        style: [itemElement.props.style, borderStyle],
       });
     });
   };
 
   private renderPopoverContentElement = (style: StyleType): React.ReactElement<ViewProps> => {
-    const menuItems: MenuItemElement[] = this.renderContentElementChildren(style.item);
+    const menuItems: MenuItemElement[] = this.renderContentElementChildren(style);
 
     return (
       <View style={this.props.style}>

diff --git a/src/framework/ui/radio/radio.component.tsx b/src/framework/ui/radio/radio.component.tsx
@@ -151,10 +151,10 @@ export class RadioComponent extends React.Component<RadioProps> {
       iconHeight,
       iconBorderRadius,
       iconTintColor,
-      highlightWidth,
-      highlightHeight,
-      highlightBorderRadius,
-      highlightBackgroundColor,
+      outlineWidth,
+      outlineHeight,
+      outlineBorderRadius,
+      outlineBackgroundColor,
       ...containerParameters
     } = source;
 
@@ -184,10 +184,10 @@ export class RadioComponent extends React.Component<RadioProps> {
         backgroundColor: iconTintColor,
       },
       highlight: {
-        width: highlightWidth,
-        height: highlightHeight,
-        borderRadius: highlightBorderRadius,
-        backgroundColor: highlightBackgroundColor,
+        width: outlineWidth,
+        height: outlineHeight,
+        borderRadius: outlineBorderRadius,
+        backgroundColor: outlineBackgroundColor,
         ...styles.highlight,
       },
     };

diff --git a/src/framework/ui/radio/radio.spec.tsx.snap b/src/framework/ui/radio/radio.spec.tsx.snap
@@ -81,23 +81,19 @@ exports[`@radio: matches snapshot default 1`] = `
       onPressIn={[Function]}
       onPressOut={[Function]}
       size="medium"
-      status="primary"
       style={
         Object {
           "alignItems": "center",
           "borderColor": "#A6AEBD",
           "borderRadius": 12,
-          "borderWidth": 2,
+          "borderWidth": 1,
           "height": 24,
           "justifyContent": "center",
           "width": 24,
         }
       }
       theme={
         Object {
-          "blue-dark": "#2541CC",
-          "blue-pitch-dark": "#0D1C2E",
-          "blue-primary": "#3366FF",
           "color-basic-100": "#F7F8FA",
           "color-basic-200": "#EDF0F5",
           "color-basic-300": "#DDE1EB",
@@ -172,39 +168,18 @@ exports[`@radio: matches snapshot default 1`] = `
           "color-warning-800": "#945400",
           "color-warning-900": "#703C00",
           "color-white": "#FFFFFF",
-          "font-light-color": "#FFFFFF",
           "font-primary-color": "#0D1C2E",
-          "font-primary-disabled-color": "#C8CEDB",
-          "font-primary-family": "",
-          "font-primary-regular-text-line-height": 16,
-          "font-primary-regular-text-size": 14,
-          "font-primary-regular-text-weight": "600",
-          "gray-100": "#f7f8fa",
-          "gray-200": "#edf0f5",
-          "gray-300": "#c8cedb",
-          "gray-400": "#a6aebd",
-          "gray-dark": "#8992A3",
-          "gray-highlight": "#EDF0F5",
-          "gray-light": "#DDE1EB",
-          "gray-primary": "#A6AEBD",
-          "opacity-transparent": "transparent",
-          "outline-color": "#DDE1EB",
-          "outline-disabled-color": "transparent",
-          "outline-disabled-width": 0,
-          "outline-width": 11,
-          "pink-primary": "#FF3D71",
-          "text-primary": "#000000",
-          "text-primary-inverse": "#ffffff",
+          "font-primary-inverse-color": "#FFFFFF",
         }
       }
     >
       <Component
         style={
           Object {
             "backgroundColor": "transparent",
-            "borderRadius": 7,
-            "height": 14,
-            "width": 14,
+            "borderRadius": 8,
+            "height": 16,
+            "width": 16,
           }
         }
       />