Feat/config (#1969)

* Create Config class

* Create a standalone package for the config file

* Use config in schemes class

* Add description

* Avoid declaring default config values twice

Author: ethanshar

scripts/buildPackages.js

@@ -6,6 +6,10 @@ const packages = [
     filename: 'keyboard.js',
     content: `module.exports = require('./lib/components/Keyboard').default;\n`
   },
+  {
+    filename: 'config.js',
+    content: `module.exports = require('./src/commons/Config').default;\n`
+  },
   {
     filename: 'core.js',
     components: ['View', 'Text', 'Image', 'TouchableOpacity', 'Button'],
@@ -52,19 +56,15 @@ packages.forEach((package) => {
     content += 'module.exports = {\n';
     _.forEach(package.components, (component) => {
       content += `get ${component}() {\n`;
-      content += `return require('./src/components/${_.camelCase(
-        component
-      )}').default;`;
+      content += `return require('./src/components/${_.camelCase(component)}').default;`;
       content += `},\n`;
 
       typings = addTyping(typings, component);
     });
 
     _.forEach(package.styleComponents, (component) => {
       content += `get ${component}() {\n`;
-      content += `return require('./src/style/${_.camelCase(
-        component
-      )}').default;`;
+      content += `return require('./src/style/${_.camelCase(component)}').default;`;
       content += `},\n`;
 
       typings = addTyping(typings, component);
@@ -88,15 +88,11 @@ fs.readdir(path, (err, files) => {
     files
       .filter((f) => f !== 'index.js')
       .forEach((file) => {
-        fs.writeFileSync(
-          `${file}.js`,
-          `module.exports = require('${path}/${file}').default;\n`
-        );
+        fs.writeFileSync(`${file}.js`,
+          `module.exports = require('${path}/${file}').default;\n`);
         const componentName = _.upperFirst(file);
-        fs.writeFileSync(
-          `${file}.d.ts`,
-          `import {${componentName}} from './generatedTypes';\nexport default ${componentName};\n`
-        );
+        fs.writeFileSync(`${file}.d.ts`,
+          `import {${componentName}} from './generatedTypes';\nexport default ${componentName};\n`);
       });
   }
 });

src/commons/Config.ts

@@ -0,0 +1,21 @@
+interface ConfigOptions {
+  /**
+   * Should use platform colors for design tokens
+   */
+  usePlatformColors?: boolean;
+}
+
+class Config {
+  usePlatformColors?: boolean;
+
+  constructor() {
+    this.setConfig({});
+  }
+
+  public setConfig(options: ConfigOptions) {
+    const {usePlatformColors = false} = options;
+    this.usePlatformColors = usePlatformColors;
+  }
+}
+
+export default new Config();

src/commons/new.ts

@@ -5,6 +5,7 @@ export {default as forwardRef, ForwardRefInjectedProps} from './forwardRef';
 export {default as withScrollEnabler, WithScrollEnablerProps} from './withScrollEnabler';
 export {default as withScrollReached, WithScrollReachedProps} from './withScrollReached';
 export {default as Constants} from './Constants';
+export {default as Config} from './Config';
 
 export {
   ContainerModifiers,

src/index.ts

@@ -5,6 +5,7 @@ export * from './services';
 export * from '../lib/components';
 export {
   asBaseComponent,
+  Config,
   Constants,
   forwardRef,
   withScrollEnabler,

src/style/scheme.ts

@@ -1,6 +1,7 @@
 import {Appearance, PlatformColor} from 'react-native';
 import {remove, xor, isEmpty, merge, forEach, cloneDeep} from 'lodash';
 import Constants from '../commons/Constants';
+import Config from '../commons/Config';
 
 export type Schemes = {light: {[key: string]: string}; dark: {[key: string]: string}};
 export type SchemeType = 'default' | 'light' | 'dark';
@@ -10,7 +11,6 @@ class Scheme {
   private currentScheme: SchemeType = 'default';
   private schemes: Schemes = {light: {}, dark: {}};
   private changeListeners: SchemeChangeListener[] = [];
-  private usePlatformColors = false;
 
   constructor() {
     Appearance.addChangeListener(() => {
@@ -71,7 +71,7 @@ class Scheme {
         Object.defineProperty(platformColorsSchemes[schemeKey], colorKey, {
           get: () => {
             let color: any = colorValue;
-            if (this.usePlatformColors) {
+            if (Config.usePlatformColors) {
               if (Constants.isAndroid) {
                 // Remove the $ prefix cause it's not allowed in Android and add the @color prefix
                 color = PlatformColor(`@color/${colorKey.replace(/^[$]/, '')}`);
@@ -97,11 +97,12 @@ class Scheme {
     return this.schemes[this.getSchemeType()];
   }
 
+  // TODO: Remove this method, use config instead
   /**
    * Should use RN PlatformColor API for retrieving design token colors from native
    */
   enablePlatformColors() {
-    this.usePlatformColors = true;
+    // this.usePlatformColors = true;
   }
 
   /**