refactor(theme): optimize module imports (#225)

akveo · Jan 3, 2019 · 2c86a03 · 2c86a03
1 parent cd60eb2
commit 2c86a03
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 54 deletions.
diff --git a/src/framework/theme/component/mapping/index.ts b/src/framework/theme/component/mapping/index.ts
@@ -1,5 +1,6 @@
 export * from './type';
+export * from './mappingContext';
 export {
-  MappingProvider as ThemeMappingProvider,
-  Props as ThemeMappingProviderProps,
+  MappingProvider,
+  Props as MappingProviderProps,
 } from './mappingProvider.component';
diff --git a/src/framework/theme/component/mapping/mappingContext.ts b/src/framework/theme/component/mapping/mappingContext.ts
@@ -2,6 +2,5 @@ import React from 'react';
 import { ThemeMappingType } from './type';
 
 const defaultValue: ThemeMappingType = {};
-const MappingContext = React.createContext(defaultValue);
 
-export default MappingContext;
+export const MappingContext = React.createContext(defaultValue);
diff --git a/src/framework/theme/component/mapping/mappingProvider.component.tsx b/src/framework/theme/component/mapping/mappingProvider.component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import MappingContext from './mappingContext';
+import { MappingContext } from './mappingContext';
 import { ThemeMappingType } from './type';
 
 export interface Props {

diff --git a/src/framework/theme/component/style/index.ts b/src/framework/theme/component/style/index.ts
@@ -1,3 +1,4 @@
+export * from './type';
 export {
   StyleProvider,
   Props as StyleProviderProps,
@@ -7,5 +8,3 @@ export {
   styled,
   Props as StyledComponentProps,
 } from './styleConsumer.component';
-
-export * from './type';
diff --git a/src/framework/theme/component/style/styleConsumer.component.tsx b/src/framework/theme/component/style/styleConsumer.component.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import { ThemeMappingType } from '../mapping';
-import {
-  ThemeType,
-  StyleType,
-} from '../theme';
-import ThemeContext from '../theme/themeContext';
-import MappingContext from '../mapping/mappingContext';
+import { MappingContext } from '../mapping';
+import { ThemeContext } from '../theme';
+import { getComponentMapping } from '../../service/mapping';
 import {
   createStyle,
   StyleConsumerService,
 } from '../../service/style';
-import { getComponentMapping } from '../../service/mapping';
-import { Interaction } from './type';
+import {
+  ThemeMappingType,
+  ThemeType,
+  StyleType,
+  Interaction,
+} from '../../component';
 
 interface PrivateProps<T> {
   forwardedRef: React.RefObject<T>;

diff --git a/src/framework/theme/component/style/styleProvider.component.tsx b/src/framework/theme/component/style/styleProvider.component.tsx
@@ -1,18 +1,16 @@
 import React from 'react';
+import {
+  MappingProvider,
+  MappingProviderProps,
+  ThemeMappingType,
+} from '../mapping';
 import {
   ThemeProvider,
+  ThemeProviderProps,
   ThemeType,
 } from '../theme';
-import {
-  ThemeMappingProvider,
-  ThemeMappingType,
-} from '../mapping';
 
-export interface Props {
-  mapping: ThemeMappingType;
-  theme: ThemeType;
-  children: JSX.Element | React.ReactNode;
-}
+export type Props = MappingProviderProps & ThemeProviderProps;
 
 interface State {
   mapping: ThemeMappingType;
@@ -35,11 +33,11 @@ export class StyleProvider extends React.Component<Props, State> {
 
   render() {
     return (
-      <ThemeMappingProvider mapping={this.state.mapping}>
+      <MappingProvider mapping={this.state.mapping}>
         <ThemeProvider theme={this.state.theme}>
           {this.props.children}
         </ThemeProvider>
-      </ThemeMappingProvider>
+      </MappingProvider>
     );
   }
 }
diff --git a/src/framework/theme/component/theme/index.ts b/src/framework/theme/component/theme/index.ts
@@ -1,4 +1,5 @@
 export * from './type';
+export * from './themeContext';
 export {
   ThemeProvider,
   Props as ThemeProviderProps,

diff --git a/src/framework/theme/component/theme/themeConsumer.component.tsx b/src/framework/theme/component/theme/themeConsumer.component.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
-import ThemeContext from './themeContext';
+import { ThemeContext } from './themeContext';
 import {
   ThemeType,
   ThemedStyleType,

diff --git a/src/framework/theme/component/theme/themeContext.ts b/src/framework/theme/component/theme/themeContext.ts
@@ -2,6 +2,5 @@ import React from 'react';
 import { ThemeType } from './type';
 
 const defaultValue: ThemeType = {};
-const ThemeContext = React.createContext(defaultValue);
 
-export default ThemeContext;
+export const ThemeContext = React.createContext(defaultValue);
diff --git a/src/framework/theme/component/theme/themeProvider.component.tsx b/src/framework/theme/component/theme/themeProvider.component.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import ThemeContext from './themeContext';
+import { ThemeContext } from './themeContext';
 import { ThemeType } from './type';
 
 export interface Props {

diff --git a/src/framework/theme/service/style/style.service.ts b/src/framework/theme/service/style/style.service.ts
@@ -4,7 +4,7 @@ import {
   getStatelessVariantMapping,
   getStateAppearanceMapping,
   getStateVariantMapping,
-} from '../mapping/mapping.service';
+} from '../mapping';
 import {
   ComponentMappingType,
   ThemeType,

diff --git a/src/framework/theme/service/style/style.spec.ts b/src/framework/theme/service/style/style.spec.ts
@@ -1,13 +1,10 @@
 import { APPEARANCE_DEFAULT } from '../mapping';
-import {
-  mapping,
-  theme,
-} from './style.spec.config';
 import * as Service from './style.service';
+import * as config from './style.spec.config';
 
 describe('@style: service methods checks', () => {
 
-  const { Test: testMapping } = mapping;
+  const { Test: testMapping } = config.mapping;
 
   describe('* preprocess', () => {
 
@@ -149,15 +146,15 @@ describe('@style: service methods checks', () => {
     describe('* default appearance', () => {
 
       it('* no variant and no state', () => {
-        const style = Service.createStyle(theme, testMapping);
+        const style = Service.createStyle(config.theme, testMapping);
         expect(style).toMatchSnapshot();
       });
 
       describe('* with state', () => {
 
         it('* single', () => {
           const style = Service.createStyle(
-            theme,
+            config.theme,
             testMapping,
             APPEARANCE_DEFAULT,
             [],
@@ -169,7 +166,7 @@ describe('@style: service methods checks', () => {
 
         it('* multiple', () => {
           const style = Service.createStyle(
-            theme,
+            config.theme,
             testMapping,
             APPEARANCE_DEFAULT,
             [],
@@ -186,7 +183,7 @@ describe('@style: service methods checks', () => {
 
           it('* no state', () => {
             const style = Service.createStyle(
-              theme,
+              config.theme,
               testMapping,
               APPEARANCE_DEFAULT,
               ['success'],
@@ -199,7 +196,7 @@ describe('@style: service methods checks', () => {
 
             it('* single implicit (should apply from appearance)', () => {
               const style = Service.createStyle(
-                theme,
+                config.theme,
                 testMapping,
                 APPEARANCE_DEFAULT,
                 ['success'],
@@ -211,7 +208,7 @@ describe('@style: service methods checks', () => {
 
             it('* single explicit (should apply own)', () => {
               const style = Service.createStyle(
-                theme,
+                config.theme,
                 testMapping,
                 APPEARANCE_DEFAULT,
                 ['success'],
@@ -223,7 +220,7 @@ describe('@style: service methods checks', () => {
 
             it('* multiple', () => {
               const style = Service.createStyle(
-                theme,
+                config.theme,
                 testMapping,
                 APPEARANCE_DEFAULT,
                 ['success'],
@@ -241,7 +238,7 @@ describe('@style: service methods checks', () => {
 
           it('* no state', () => {
             const style = Service.createStyle(
-              theme,
+              config.theme,
               testMapping,
               APPEARANCE_DEFAULT,
               ['success', 'big'],
@@ -254,7 +251,7 @@ describe('@style: service methods checks', () => {
 
             it('* single', () => {
               const style = Service.createStyle(
-                theme,
+                config.theme,
                 testMapping,
                 APPEARANCE_DEFAULT,
                 ['success', 'big'],
@@ -266,7 +263,7 @@ describe('@style: service methods checks', () => {
 
             it('* multiple', () => {
               const style = Service.createStyle(
-                theme,
+                config.theme,
                 testMapping,
                 APPEARANCE_DEFAULT,
                 ['success', 'big'],
@@ -287,7 +284,7 @@ describe('@style: service methods checks', () => {
     describe('* custom appearance', () => {
 
       it('* no variant and no state', () => {
-        const style = Service.createStyle(theme, testMapping, 'custom');
+        const style = Service.createStyle(config.theme, testMapping, 'custom');
 
         expect(style).toMatchSnapshot();
       });
@@ -296,7 +293,7 @@ describe('@style: service methods checks', () => {
 
         it('* implicit (should apply from default appearance)', () => {
           const style = Service.createStyle(
-            theme,
+            config.theme,
             testMapping,
             'custom',
             [],
@@ -308,7 +305,7 @@ describe('@style: service methods checks', () => {
 
         it('* explicit (should apply own)', () => {
           const style = Service.createStyle(
-            theme,
+            config.theme,
             testMapping,
             'custom',
             [],
@@ -324,7 +321,7 @@ describe('@style: service methods checks', () => {
 
         it('* implicit (should apply from default appearance)', () => {
           const style = Service.createStyle(
-            theme,
+            config.theme,
             testMapping,
             'custom',
             ['big'],
@@ -335,7 +332,7 @@ describe('@style: service methods checks', () => {
 
         it('* explicit (should apply own)', () => {
           const style = Service.createStyle(
-            theme,
+            config.theme,
             testMapping,
             'custom',
             ['success'],
@@ -351,7 +348,7 @@ describe('@style: service methods checks', () => {
     describe('* undefined appearance', () => {
 
       it('* no variant and no state (should apply default appearance)', () => {
-        const style = Service.createStyle(theme, testMapping, 'undefined');
+        const style = Service.createStyle(config.theme, testMapping, 'undefined');
 
         expect(style).toMatchSnapshot();
       });

diff --git a/src/framework/theme/service/style/styleConsumer.spec.tsx b/src/framework/theme/service/style/styleConsumer.spec.tsx
@@ -18,7 +18,7 @@ import {
   Interaction,
   State,
 } from '../../component';
-import { APPEARANCE_DEFAULT } from '../mapping/mapping.service';
+import { APPEARANCE_DEFAULT } from '../mapping';
 import { StyleConsumerService } from './styleConsumer.service';
 import {
   mapping,