@bifold/core 2.2.1 → 2.4.0

package/lib/module/theme-builder.js

@@ -0,0 +1,109 @@
+import { createButtonsTheme, createChatTheme, createHomeTheme, createInputInlineMessageTheme, createInputsTheme, createListItemsTheme, createNavigationTheme, createSettingsTheme, createTabTheme, createTextTheme, createOnboardingTheme, createDialogTheme, createLoadingTheme, createPINInputTheme } from './theme';
+import lodash from 'lodash';
+
+/**
+ * DeepPartial is a utility type that recursively makes all properties of a type optional.
+ */
+
+/**
+ * ThemeBuilder is a utility class to extend an existing theme with additional properties.
+ *
+ * @class ThemeBuilder
+ */
+export class ThemeBuilder {
+  /**
+   * Creates an instance of ThemeBuilder.
+   *
+   * @param {ITheme} baseTheme - The initial theme object to extend.
+   */
+  constructor(baseTheme) {
+    this._theme = baseTheme;
+    this._themeOverrides = {};
+  }
+
+  /**
+   * Sets the color pallet for the theme.
+   *
+   * Note: This method is mostly a convenience method to set the color pallet for the theme.
+   * The same can be achieved by directly modifying the theme object using the `withOverrides` method.
+   *
+   * @param {IColorPalette} colorPalette - The color pallet to set for the theme.
+   * @returns {*} {ThemeBuilder} Returns the instance of ThemeBuilder for method chaining.
+   */
+  setColorPalette(colorPalette) {
+    this._theme.ColorPalette = colorPalette;
+    return this;
+  }
+
+  /**
+   * Overrides properties in the current theme with the provided themeOverrides.
+   *
+   * Note: This will overwrite existing properties in the current theme with those from the provided themeOverrides.
+   *
+   * @example
+   * new ThemeBuilder({ Buttons: { color: 'purple', size: 'large' }})
+   * .withOverrides({ Buttons: { color: 'red' }})
+   * .withOverrides({ Buttons: { spacing: 10 }}) // => { Buttons: { color: 'red', size: 'large', spacing: 10 }}
+   *
+   * @example
+   * new ThemeBuilder({ Buttons: { critical: { padding: 10, margin: 0 }}})
+   * .withOverrides((theme) => ({
+   *  Buttons: { critical: { padding: 0, margin: -1 } },
+   * })) // => { Buttons: { critical: { padding: 0, margin: -1 } }}
+   *
+   * @param {DeepPartial<ITheme> | ((theme: ITheme) => DeepPartial<ITheme>) } themeOverrides A partial theme object to merge with the current theme or a callback function that receives the current theme and returns a partial theme object.
+   * @returns {*} {ThemeBuilder} Returns the instance of ThemeBuilder for method chaining.
+   */
+  withOverrides(themeOverrides) {
+    const resolvedOverrides = typeof themeOverrides === 'function' ? themeOverrides(this._theme) : themeOverrides;
+
+    // note: without the empty object, lodash.merge will mutate the original theme overrides,
+    // and not properly update the nested properties
+    this._themeOverrides = lodash.merge({}, this._themeOverrides, resolvedOverrides);
+
+    // Rebuild the theme with the new overrides so following chained calls will use the updated theme.
+    this._theme = this.build();
+
+    // Return the instance for method chaining
+    return this;
+  }
+
+  /**
+   * Builds and returns the final theme object.
+   *
+   * @returns {*} {ITheme} Returns the final theme object.
+   */
+  build() {
+    // Step 1. Merge the theme overrides onto the original theme, producing the new base theme.
+    const baseTheme = lodash.merge({}, this._theme, this._themeOverrides);
+
+    // Step 2. Generate computed properties that depend on the base theme
+    const dependentThemes = {
+      TextTheme: createTextTheme(baseTheme),
+      InputInlineMessage: createInputInlineMessageTheme(baseTheme),
+      Inputs: createInputsTheme(baseTheme),
+      Buttons: createButtonsTheme(baseTheme),
+      ListItems: createListItemsTheme(baseTheme),
+      TabTheme: createTabTheme(baseTheme),
+      NavigationTheme: createNavigationTheme(baseTheme),
+      HomeTheme: createHomeTheme(baseTheme),
+      SettingsTheme: createSettingsTheme(baseTheme),
+      ChatTheme: createChatTheme(baseTheme),
+      OnboardingTheme: createOnboardingTheme(baseTheme),
+      DialogTheme: createDialogTheme(baseTheme),
+      LoadingTheme: createLoadingTheme(baseTheme),
+      PINInputTheme: createPINInputTheme(baseTheme)
+    };
+
+    /**
+     * Step 3. Merge all together - base + generated + overrides
+     *
+     * Why do we apply the overrides after the dependent themes?
+     * Because the `dependentThemes` contain additional properties that may have
+     * been modified by the overrides previously.
+     */
+    this._theme = lodash.merge({}, baseTheme, dependentThemes, this._themeOverrides);
+    return this._theme;
+  }
+}
+//# sourceMappingURL=theme-builder.js.map

package/lib/module/theme-builder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createButtonsTheme","createChatTheme","createHomeTheme","createInputInlineMessageTheme","createInputsTheme","createListItemsTheme","createNavigationTheme","createSettingsTheme","createTabTheme","createTextTheme","createOnboardingTheme","createDialogTheme","createLoadingTheme","createPINInputTheme","lodash","ThemeBuilder","constructor","baseTheme","_theme","_themeOverrides","setColorPalette","colorPalette","ColorPalette","withOverrides","themeOverrides","resolvedOverrides","merge","build","dependentThemes","TextTheme","InputInlineMessage","Inputs","Buttons","ListItems","TabTheme","NavigationTheme","HomeTheme","SettingsTheme","ChatTheme","OnboardingTheme","DialogTheme","LoadingTheme","PINInputTheme"],"sourceRoot":"../../src","sources":["theme-builder.ts"],"mappings":"AAAA,SAGEA,kBAAkB,EAClBC,eAAe,EACfC,eAAe,EACfC,6BAA6B,EAC7BC,iBAAiB,EACjBC,oBAAoB,EACpBC,qBAAqB,EACrBC,mBAAmB,EACnBC,cAAc,EACdC,eAAe,EACfC,qBAAqB,EACrBC,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,QACd,SAAS;AAChB,OAAOC,MAAM,MAAM,QAAQ;;AAE3B;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAY,CAAC;EAIxB;AACF;AACA;AACA;AACA;EACEC,WAAWA,CAACC,SAAiB,EAAE;IAC7B,IAAI,CAACC,MAAM,GAAGD,SAAS;IACvB,IAAI,CAACE,eAAe,GAAG,CAAC,CAAC;EAC3B;;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEC,eAAeA,CAACC,YAA2B,EAAQ;IACjD,IAAI,CAACH,MAAM,CAACI,YAAY,GAAGD,YAAY;IAEvC,OAAO,IAAI;EACb;;EAEA;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEE,aAAaA,CAACC,cAA8E,EAAQ;IAClG,MAAMC,iBAAiB,GAAG,OAAOD,cAAc,KAAK,UAAU,GAAGA,cAAc,CAAC,IAAI,CAACN,MAAM,CAAC,GAAGM,cAAc;;IAE7G;IACA;IACA,IAAI,CAACL,eAAe,GAAGL,MAAM,CAACY,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAACP,eAAe,EAAEM,iBAAiB,CAAC;;IAEhF;IACA,IAAI,CAACP,MAAM,GAAG,IAAI,CAACS,KAAK,CAAC,CAAC;;IAE1B;IACA,OAAO,IAAI;EACb;;EAEA;AACF;AACA;AACA;AACA;EACEA,KAAKA,CAAA,EAAW;IACd;IACA,MAAMV,SAAS,GAAGH,MAAM,CAACY,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,CAACR,MAAM,EAAE,IAAI,CAACC,eAAe,CAAC;;IAErE;IACA,MAAMS,eAAgC,GAAG;MACvCC,SAAS,EAAEpB,eAAe,CAACQ,SAAS,CAAC;MACrCa,kBAAkB,EAAE3B,6BAA6B,CAACc,SAAS,CAAC;MAC5Dc,MAAM,EAAE3B,iBAAiB,CAACa,SAAS,CAAC;MACpCe,OAAO,EAAEhC,kBAAkB,CAACiB,SAAS,CAAC;MACtCgB,SAAS,EAAE5B,oBAAoB,CAACY,SAAS,CAAC;MAC1CiB,QAAQ,EAAE1B,cAAc,CAACS,SAAS,CAAC;MACnCkB,eAAe,EAAE7B,qBAAqB,CAACW,SAAS,CAAC;MACjDmB,SAAS,EAAElC,eAAe,CAACe,SAAS,CAAC;MACrCoB,aAAa,EAAE9B,mBAAmB,CAACU,SAAS,CAAC;MAC7CqB,SAAS,EAAErC,eAAe,CAACgB,SAAS,CAAC;MACrCsB,eAAe,EAAE7B,qBAAqB,CAACO,SAAS,CAAC;MACjDuB,WAAW,EAAE7B,iBAAiB,CAACM,SAAS,CAAC;MACzCwB,YAAY,EAAE7B,kBAAkB,CAACK,SAAS,CAAC;MAC3CyB,aAAa,EAAE7B,mBAAmB,CAACI,SAAS;IAC9C,CAAC;;IAED;AACJ;AACA;AACA;AACA;AACA;AACA;IACI,IAAI,CAACC,MAAM,GAAGJ,MAAM,CAACY,KAAK,CAAC,CAAC,CAAC,EAAET,SAAS,EAAEW,eAAe,EAAE,IAAI,CAACT,eAAe,CAAC;IAEhF,OAAO,IAAI,CAACD,MAAM;EACpB;AACF","ignoreList":[]}

package/lib/module/theme.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme.interface.js.map

package/lib/module/theme.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["theme.interface.ts"],"mappings":"","ignoreList":[]}