fix: withThemeStyles order refactor (#388)

* fix: Update rules for withThemeStyles merge order

* fix: add deprecation notice for styleConfig. Add comments

* fix: small code linting issue

* test: add unit tests

* test: write unit tests for withThemeStyles utils

* test: add more unit tests to withThemeStyles utils

* test: fix withThemeStyles util tests

* test: fix unit tests for withThemeStyles utils

* test: update unit tests for withThemeStyles utils

* fix: bug in withThemeStyles utils

* fix: update linting errors

* feat: add ability for themes to interact with component props

* fix: update deep merge to accomidate styles for componentConfig sub properties

* fix: updates ability to set props from componentConfig and adds unit tests

* fix: reference to componentLevelStyle

* fix: bug in generateStyle

* fix: add support for custom modes and tones

* fix: add custom mode support

* fix: remove commented code

* fix: update formatting

* fix: update snapshots

packages/@lightningjs/ui-components/src/components/Keyboard/__snapshots__/Keyboard.test.js.snap

@@ -23681,7 +23681,7 @@ exports[`KeyboardInput renders 1`] = `
               "visible": true,
               "w": 1920,
               "x": 0,
-              "y": 112,
+              "y": 202,
               "zIndex": 0,
             },
           },
@@ -23690,7 +23690,7 @@ exports[`KeyboardInput renders 1`] = `
           "enabled": true,
           "flex": false,
           "flexItem": false,
-          "h": 112,
+          "h": 202,
           "isComponent": undefined,
           "mount": 0,
           "mountX": 0,

packages/@lightningjs/ui-components/src/mixins/withThemeStyles/StyleManager.js

@@ -18,6 +18,7 @@
 
 import {
   generateComponentStyleSource,
+  getStyleChainMemoized,
   generateStyle,
   getHash
 } from './utils.js';
@@ -42,6 +43,7 @@ export default class StyleManager extends lng.EventEmitter {
     this.component = component;
     this.setupListeners();
     this._style = {}; // This will be the source of truth for the style manager
+    this._props = {}; // props that are set in componentConfig will be stored here
     // Initial update is not debounced
     this.update();
   }
@@ -199,7 +201,17 @@ export default class StyleManager extends lng.EventEmitter {
 
       if (!styleSource) {
         // Style source does not exist so it will need to be generated. We attempt to run this function only when necessary for optimal performance
-        styleSource = generateComponentStyleSource(this.component);
+        styleSource = generateComponentStyleSource({
+          alias: this.component.constructor.aliasStyles,
+          componentConfig: this.component._componentConfig,
+          inlineStyle: this.component._componentLevelStyle,
+          name:
+            this.component.constructor.__componentName ||
+            this.component.constructor.name,
+          styleChain: getStyleChainMemoized(this.component),
+          theme: this.component.theme
+        });
+
         this._addCache('styleSource', styleSource);
       }
 
@@ -209,9 +221,10 @@ export default class StyleManager extends lng.EventEmitter {
       if (!style) {
         // Style does not exist so will also need to be generated
         style = generateStyle(this.component, styleSource);
-
         this._addCache(`style_${mode}_${tone}`, style);
       }
+      this._props = style.props;
+      delete style.props;
       this._style = style;
       this.emit('styleUpdate', this.style);
     } catch (error) {
@@ -230,6 +243,14 @@ export default class StyleManager extends lng.EventEmitter {
     return this._style;
   }
 
+  set props(v) {
+    context.warn('styleManager: Cannot mutate props directly');
+  }
+
+  get props() {
+    return this._props;
+  }
+
   /**
    * Simple check to see if this component can leverage caching. Components using .style cannot use the cache at this time
    */

packages/@lightningjs/ui-components/src/mixins/withThemeStyles/index.js

@@ -21,7 +21,7 @@ import { updateManager } from '../../globals';
 import { context } from '../../globals';
 import { getComponentConfig, getSubTheme } from './utils';
 import { capitalizeFirstLetter } from '../../utils';
-
+import utils from '../../utils';
 /**
  * A higher-order function that returns a class with theme styles.
  * @param {function} Base - The base class to extend.
@@ -43,8 +43,11 @@ export default function withThemeStyles(Base, mixinStyle = {}) {
 
       this._styleManager = new StyleManager({ component: this });
       this._style = this._styleManager.style; // Set the style for the first time. After this is will be updated by events
+
+      this._updatePropDefaults();
       this._styleManager.on('styleUpdate', () => {
         this._style = this._styleManager.style;
+        this._updatePropDefaults();
         this.queueThemeUpdate();
       });
       this._withThemeStylesSetupComplete = true;
@@ -67,6 +70,27 @@ export default function withThemeStyles(Base, mixinStyle = {}) {
       }
     }
 
+    _updatePropDefaults() {
+      // Add support for properties passed through the theme
+      const componentConfigProps = this._styleManager.props || {};
+      if (
+        Object.keys(componentConfigProps).length &&
+        this.constructor.properties &&
+        this.constructor.properties.length
+      ) {
+        Object.keys(componentConfigProps).forEach(key => {
+          if (this.constructor.properties.includes(key)) {
+            this[`_${key}`] =
+              typeof this[`_${key}`] === 'object' &&
+              this[`_${key}`] !== null &&
+              !Array.isArray(this[`_${key}`])
+                ? utils.clone(this[`_${key}`] || {}, componentConfigProps[key])
+                : componentConfigProps[key];
+          }
+        });
+      }
+    }
+
     /**
      * On component attach, ensures the StyleManager has been reinitialized if it was previously destroyed in detach.
      * @private