feat(theme): token integration (#191)

jest.config.js

@@ -1,4 +1,6 @@
 const { defaults: tsJestConfig } = require('ts-jest/presets');
+const { pathsToModuleNameMapper } = require('ts-jest/utils');
+const jestConfig = require('./tsconfig.jest');
 
 module.exports = {
   ...tsJestConfig,
@@ -14,6 +16,9 @@ module.exports = {
     },
   },
   cacheDirectory: './dist/jest',
+  moduleNameMapper: pathsToModuleNameMapper(jestConfig.compilerOptions.paths, {
+    prefix: '<rootDir>/',
+  }),
   modulePathIgnorePatterns: [
     '<rootDir>/src/playground/'
   ],

src/framework/theme/component/index.ts

@@ -1,4 +1,3 @@
-export { ThemeProvider } from './themeProvider.component';
-export { withTheme } from './themeConsumer.component';
-export { withThemedStyles } from './themeConsumerStyled.component';
-export { ThemeType } from './type';
+export * from './mapping';
+export * from './theme';
+export * from './style';

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

@@ -0,0 +1,5 @@
+export * from './type';
+export {
+  MappingProvider as ThemeMappingProvider,
+  Props as ThemeMappingProviderProps,
+} from './mappingProvider.component';

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

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import MappingContext from './mappingContext';
+import { ThemeMappingType } from './type';
+
+export interface Props {
+  mapping: ThemeMappingType[];
+  children: JSX.Element | React.ReactNode;
+}
+
+export class MappingProvider extends React.PureComponent<Props> {
+
+  render() {
+    return (
+      <MappingContext.Provider
+        value={this.props.mapping}>
+        {this.props.children}
+      </MappingContext.Provider>
+    );
+  }
+}

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

@@ -0,0 +1,22 @@
+export interface ThemeMappingType {
+  name: string;
+  parameters: ParameterType[];
+  variants: VariantType[];
+}
+
+export interface ParameterType {
+  name: string;
+}
+
+export interface VariantType {
+  name: string;
+  mapping: MappingType[];
+}
+
+export interface MappingType {
+  parameter: string;
+  token: string;
+}
+
+// TODO(mapping/type): declare Token type
+export type TokenType = any;

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

@@ -0,0 +1,9 @@
+export {
+  StyleProvider,
+  Props as StyleProviderProps,
+} from './styleProvider.component';
+
+export {
+  StyledComponent,
+  Props as StyledComponentProps,
+} from './styleConsumer.component';

src/framework/theme/component/style/styleConsumer.component.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+  ThemeType,
+  StyleType,
+} from '../theme';
+import { ThemeMappingType } from '../mapping';
+import ThemeContext from '../theme/themeContext';
+import MappingContext from '../mapping/mappingContext';
+import {
+  createStyle,
+  getComponentThemeMapping,
+} from '../../service';
+
+interface PrivateProps<T> {
+  forwardedRef: React.RefObject<T>;
+}
+
+interface ConsumerProps {
+  mapping: ThemeMappingType[];
+  theme: ThemeType;
+}
+
+export interface Props {
+  variant: string;
+  theme?: ThemeType;
+  themedStyle?: StyleType;
+}
+
+export const StyledComponent = <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> {
+
+    getComponentName = (): string => Component.displayName || Component.name;
+
+    createCustomProps = (props: ConsumerProps, variant: string): Props => {
+      const mapping = getComponentThemeMapping(this.getComponentName(), props.mapping);
+      return {
+        variant: variant,
+        theme: props.theme,
+        themedStyle: mapping && props.theme && createStyle(props.theme, mapping, variant),
+      };
+    };
+
+    renderWrappedComponent = (props: ConsumerProps) => {
+      // TS issue: with spreading Generics https://github.com/Microsoft/TypeScript/issues/15792
+      const { forwardedRef, ...restProps } = this.props as PrivateProps<T>;
+      const componentProps = restProps as P & Props;
+      return (
+        <Component
+          ref={forwardedRef}
+          {...this.createCustomProps(props, componentProps.variant)}
+          {...componentProps}
+        />
+      );
+    };
+
+    render() {
+      return (
+        <MappingContext.Consumer>{(mapping: ThemeMappingType[]) => (
+          <ThemeContext.Consumer>{(theme: ThemeType) => {
+            return this.renderWrappedComponent({ mapping: mapping, theme: theme });
+          }}</ThemeContext.Consumer>
+        )}</MappingContext.Consumer>
+      );
+    }
+  }
+
+  const RefForwardingFactory = (props: WrapperProps, ref: T) => {
+    return (
+      <Wrapper {...props} forwardedRef={ref}/>
+    );
+  };
+
+  return React.forwardRef<T, P>(RefForwardingFactory as any);
+};

src/framework/theme/component/style/styleProvider.component.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  ThemeProvider,
+  ThemeType,
+} from '../theme';
+import {
+  ThemeMappingProvider,
+  ThemeMappingType,
+} from '../mapping';
+
+export interface Props {
+  mapping: ThemeMappingType[];
+  theme: ThemeType;
+  children: JSX.Element | React.ReactNode;
+}
+
+interface State {
+  mapping: ThemeMappingType[];
+  theme: ThemeType;
+}
+
+export class StyleProvider extends React.Component<Props, State> {
+
+  static getDerivedStateFromProps(props: Props): State {
+    return {
+      mapping: props.mapping,
+      theme: props.theme,
+    };
+  }
+
+  state: State = {
+    mapping: [],
+    theme: {},
+  };
+
+  render() {
+    return (
+      <ThemeMappingProvider mapping={this.state.mapping}>
+        <ThemeProvider theme={this.state.theme}>
+          {this.props.children}
+        </ThemeProvider>
+      </ThemeMappingProvider>
+    );
+  }
+}

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

@@ -0,0 +1,9 @@
+export * from './type';
+export {
+  ThemeProvider,
+  Props as ThemeProviderProps,
+} from './themeProvider.component';
+export {
+  withStyles,
+  Props as ThemedComponentProps,
+} from './themeConsumer.component';

src/framework/theme/component/theme/themeConsumer.component.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import ThemeContext from './themeContext';
+import {
+  ThemeType,
+  ThemedStyleType,
+  StyleSheetType,
+} from './type';
+
+interface PrivateProps<T> {
+  forwardedRef: React.RefObject<T>;
+}
+
+interface ConsumerProps {
+  theme: ThemeType;
+}
+
+export interface Props {
+  theme: ThemeType;
+  themedStyle: ThemedStyleType | undefined;
+}
+
+export type CreateStylesFunction = (theme: ThemeType) => StyleSheetType;
+
+export const withStyles = <T extends React.Component, P extends object>(Component: React.ComponentClass<P>,
+                                                                        createStyles?: CreateStylesFunction) => {
+
+  type ComponentProps = Props & P;
+  type WrapperProps = PrivateProps<T> & ComponentProps;
+
+  class Wrapper extends React.Component<WrapperProps> {
+
+    createCustomProps = (props: ConsumerProps): Props => {
+      return ({
+        theme: props.theme,
+        themedStyle: createStyles ? createStyles(props.theme) : undefined,
+      });
+    };
+
+    renderWrappedComponent = (props: ConsumerProps) => {
+      // TS issue: with spreading Generics https://github.com/Microsoft/TypeScript/issues/15792
+      const { forwardedRef, ...restProps } = this.props as PrivateProps<T>;
+      const componentProps = restProps as P & Props;
+      return (
+        <Component
+          ref={forwardedRef}
+          {...this.createCustomProps(props)}
+          {...componentProps}
+        />
+      );
+    };
+
+    render() {
+      return (
+        <ThemeContext.Consumer>{(theme: ThemeType) => {
+          return this.renderWrappedComponent({theme: theme});
+        }}</ThemeContext.Consumer>
+      );
+    }
+  }
+
+  const RefForwardingFactory = (props: WrapperProps, ref: T) => {
+    return (
+      <Wrapper {...props} forwardedRef={ref}/>
+    );
+  };
+
+  return React.forwardRef<T, P>(RefForwardingFactory as any);
+};

src/framework/theme/component/theme/themeContext.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ThemeType } from './type';
+
+const defaultValue: ThemeType = {};
+const ThemeContext = React.createContext(defaultValue);
+
+export default ThemeContext;

src/framework/theme/component/themeProvider.component.tsx → src/framework/theme/component/theme/themeProvider.component.tsx

@@ -1,24 +1,20 @@
 import React, { ReactNode } from 'react';
-import { Provider } from '../service';
+import ThemeContext from './themeContext';
 import { ThemeType } from './type';
 
-interface Props {
-  children: JSX.Element | ReactNode;
+export interface Props {
   theme: ThemeType;
+  children: JSX.Element | ReactNode;
 }
 
 export class ThemeProvider extends React.PureComponent<Props> {
 
-  static defaultProps = {
-    theme: {},
-  };
-
   render() {
     return (
-      <Provider
+      <ThemeContext.Provider
         value={this.props.theme}>
         {this.props.children}
-      </Provider>
+      </ThemeContext.Provider>
     );
   }
 }

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

@@ -1,5 +1,6 @@
-// TODO(@type): declare theme types
+// TODO(theme/type): declare Theme types
 
 export type ThemeType = any;
+export type StyleType = any;
 export type ThemedStyleType = any;
 export type StyleSheetType = any;