feat(ui): Radio. Closes #201 (#212)

* feat(ui/radio): initial compomponent implementation

* feat(ui/radio): state mapping support

* feat(ui/radio): apply design styles

* test(radio): add radio component tests

* test(ui/radio): [temporary] radio tests

* feat(theme): add appearances mapping config

* refactor(theme): split theme service

* refactor(theme): remove useless tests

* refactor(theme): [temporary] mapping & style services

* merge: style-consumer-appearance-support

* refactor(theme): style-consumer methods refactor, move to service

* refactor(theme): remove unused imports from style-consumer

* refactor(theme): move method from hoc to service (style-consumer)

* refactor(theme): framework ui-component imports refactor (style-component is decorator now).

* test(theme): style-consumer-service spec add

* refactor(theme): style-consumer-service functions refactor

* refactor(theme): style-consumer-service as a class implement and integrate

* build(tsconfig): allow using decorators switch-on

* refactor(theme): styled decorator rename

* feat(theme): createStyle function supporting appearances

* refactor(theme): style consumer service

* refactor(ui/radio): adopt component to new config

* test(theme): adopt theme test to new config

* refactor(playground): remove sample component

* feat(playground): update radio screen examples

* build(package): react-native-testing-library update

* test(ui/radio): add radio component snapshot tests

* refactor(playground): adopt radio screen to appearances config

Author: artyorsh

package-lock.json

@@ -45,7 +45,7 @@
     "react-addons-test-utils": "^15.6.2",
     "react-native": "^0.57.4",
     "react-native-mock": "^0.3.1",
-    "react-native-testing-library": "^1.3.0",
+    "react-native-testing-library": "^1.5.0",
     "react-native-typescript-transformer": "^1.2.10",
     "react-test-renderer": "^16.6.0",
     "rimraf": "^2.6.2",

package.json

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ThemeMappingType } from './type';
 
-const defaultValue: ThemeMappingType[] = [];
+const defaultValue: ThemeMappingType = {};
 const MappingContext = React.createContext(defaultValue);
 
 export default MappingContext;

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

@@ -3,7 +3,7 @@ import MappingContext from './mappingContext';
 import { ThemeMappingType } from './type';
 
 export interface Props {
-  mapping: ThemeMappingType[];
+  mapping: ThemeMappingType;
   children: JSX.Element | React.ReactNode;
 }
 

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

@@ -1,14 +1,25 @@
-// TODO(mapping/type): declare Config/Token type
+export type ThemeMappingType = any;
 
-export type ThemeMappingConfigType = any;
+export interface ComponentMappingType {
+  appearance: any;
+}
 
-export interface ThemeMappingType {
-  parameters: string[];
-  variants: any;
+export interface AppearanceType {
+  mapping: MappingType;
+  variant?: any;
 }
 
+export type VariantGroupType = any;
+
 export interface VariantType {
-  state: any;
+  mapping: MappingType;
+}
+
+export interface MappingType {
+  state?: StateType;
 }
 
+export type StateType = any;
+
+
 export type TokenType = any;

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

@@ -4,6 +4,6 @@ export {
 } from './styleProvider.component';
 
 export {
-  StyledComponent,
+  styled,
   Props as StyledComponentProps,
 } from './styleConsumer.component';

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

@@ -4,57 +4,68 @@ import {
   ThemeType,
   StyleType,
 } from '../theme';
-import { ThemeMappingType } from '../mapping';
+import {
+  ThemeMappingType,
+  ComponentMappingType,
+} from '../mapping';
 import ThemeContext from '../theme/themeContext';
 import MappingContext from '../mapping/mappingContext';
 import {
   createStyle,
-  getComponentThemeMapping,
+  getComponentMapping,
+  StyleConsumerService,
 } from '../../service';
 
 interface PrivateProps<T> {
   forwardedRef: React.RefObject<T>;
 }
 
 interface ConsumerProps {
-  mapping: ThemeMappingType[];
+  mapping: ThemeMappingType;
   theme: ThemeType;
 }
 
 export interface Props {
-  variant?: string;
+  appearance?: string;
   theme?: ThemeType;
   themedStyle?: StyleType;
-  requestStateStyle?: (state: string[] | string) => StyleType;
+  requestStateStyle?: (state: string[]) => StyleType;
 }
 
-export const StyledComponent = <T extends React.Component, P extends object>(Component: React.ComponentClass<P>) => {
+export const styled = <T extends React.Component, P extends object>(Component: React.ComponentClass<P>) => {
 
   type ComponentProps = Props & P;
   type WrapperProps = PrivateProps<T> & ComponentProps;
 
   class Wrapper extends React.Component<WrapperProps> {
 
+    service: StyleConsumerService = new StyleConsumerService();
+
     getComponentName = (): string => Component.displayName || Component.name;
 
-    createStyle = (theme: ThemeType,
-                   mapping: ThemeMappingType,
-                   variant: string[] | string,
-                   state: string[] | string): StyleType => {
+    createComponentStyle = (theme: ThemeType,
+                            mapping: ComponentMappingType,
+                            appearance: string,
+                            variant: string[],
+                            state: string[]): StyleType => {
 
       if (state.length === 0) {
         console.warn('Redundant `requestStateStyle` call! Use `this.props.themedStyle` instead!');
       }
-      return createStyle(theme, mapping, variant, state);
+      return createStyle(theme, mapping, appearance, variant, state);
     };
 
-    createCustomProps = (props: ConsumerProps, variant: string): Props => {
-      const mapping = getComponentThemeMapping(this.getComponentName(), props.mapping);
+    createCustomProps = (props: ConsumerProps, componentProps: P & Props): Props => {
+      const mapping = getComponentMapping(props.mapping, this.getComponentName());
+      const variants = this.service.getVariantPropKeys<P & Props>(mapping, componentProps);
+
       return {
-        variant: variant,
+        appearance: componentProps.appearance,
         theme: props.theme,
-        themedStyle: createStyle(props.theme, mapping, variant),
-        requestStateStyle: state => this.createStyle(props.theme, mapping, variant, state),
+        themedStyle: createStyle(props.theme, mapping, componentProps.appearance, variants),
+        requestStateStyle: state => {
+          return this.createComponentStyle(props.theme, mapping, componentProps.appearance, variants, state);
+        },
       };
     };
 
@@ -65,15 +76,15 @@ export const StyledComponent = <T extends React.Component, P extends object>(Com
       return (
         <Component
           ref={forwardedRef}
-          {...this.createCustomProps(props, componentProps.variant)}
+          {...this.createCustomProps(props, componentProps)}
           {...componentProps}
         />
       );
     };
 
     render() {
       return (
-        <MappingContext.Consumer>{(mapping: ThemeMappingType[]) => (
+        <MappingContext.Consumer>{(mapping: ThemeMappingType) => (
           <ThemeContext.Consumer>{(theme: ThemeType) => {
             return this.renderWrappedComponent({ mapping: mapping, theme: theme });
           }}</ThemeContext.Consumer>