Skip to content

Commit

Permalink
chore: add themeManager to manager global theme (#1835)
Browse files Browse the repository at this point in the history
* chore: add themeManager to manager global theme

* chore: remove momentum components

* chore: export themeManager

* chore: export default themeManager
  • Loading branch information
NotNestor authored Nov 22, 2024
1 parent 817c0f5 commit 7fa3f4d
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 30 deletions.
6 changes: 4 additions & 2 deletions web-components/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@momentum-ui/web-components",
"version": "2.15.3",
"version": "2.16.0",
"author": "Yana Harris",
"license": "MIT",
"repository": "https://github.com/momentum-design/momentum-ui.git",
Expand Down Expand Up @@ -73,7 +73,9 @@
"luxon": "^1.25.0",
"nanoid": "^3.1.16",
"papaparse": "^5.4.1",
"sortablejs": "^1.15.3"
"sortablejs": "^1.15.3",
"mobx": "^5.15.4",
"@adobe/lit-mobx": "^1.0.1"
},
"devDependencies": {
"@babel/core": "^7.25.7",
Expand Down
50 changes: 22 additions & 28 deletions web-components/src/[sandbox]/sandbox.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,11 @@
import styles from "@/[sandbox]/sandbox.scss";
import "@/components/sass-stats/SassStats";
import { ThemeName } from "@/components/theme/Theme";
import "@/components/theme/ThemeManager";
import themeManager from "@/components/theme/ThemeManager";
import reset from "@/wc_scss/reset.scss";
import {
customElement,
html,
internalProperty,
LitElement,
property,
PropertyValues,
TemplateResult
} from "lit-element";
import { MobxLitElement } from "@adobe/lit-mobx";
import { customElement, html, internalProperty, PropertyValues, TemplateResult } from "lit-element";
import {
accordionTemplate,
advanceListTemplate,
Expand Down Expand Up @@ -69,13 +64,7 @@ import {
} from "./examples";

@customElement("momentum-ui-web-components-sandbox")
export class Sandbox extends LitElement {
@property({ type: Boolean })
darkTheme = false;

@property({ type: String })
theme: ThemeName = "lumos";

export class Sandbox extends MobxLitElement {
@internalProperty()
private selectedTab = "Accordion";

Expand All @@ -100,7 +89,7 @@ export class Sandbox extends LitElement {

protected updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (this.darkTheme) {
if (themeManager.isDarkMode) {
document.body.style.backgroundColor = "#000";
document.body.style.color = "#fff";
} else {
Expand All @@ -116,12 +105,12 @@ export class Sandbox extends LitElement {
loadSettingsFromStorage() {
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
this.theme = storedTheme as ThemeName;
themeManager.setThemeName(storedTheme as ThemeName);
}

const storedDarkTheme = localStorage.getItem("darkTheme");
if (storedDarkTheme) {
this.darkTheme = JSON.parse(storedDarkTheme);
themeManager.setDarkMode(JSON.parse(storedDarkTheme));
}
}

Expand All @@ -130,11 +119,11 @@ export class Sandbox extends LitElement {
const target = composedPath[0] as unknown as HTMLOrSVGElement;
const { aspect } = target.dataset;
if (aspect === "lumos" || aspect === "momentumV2" || aspect === "momentum") {
this.theme = aspect;
localStorage.setItem("theme", this.theme);
themeManager.setThemeName(aspect);
localStorage.setItem("theme", themeManager.themeName);
} else if (aspect === "darkTheme") {
this.darkTheme = !this.darkTheme;
localStorage.setItem("darkTheme", JSON.stringify(this.darkTheme));
themeManager.setDarkMode(!themeManager.isDarkMode);
localStorage.setItem("darkTheme", JSON.stringify(themeManager.isDarkMode));
} else {
console.error("Invalid data-aspect input");
return;
Expand All @@ -151,7 +140,7 @@ export class Sandbox extends LitElement {
class="theme-switch"
data-aspect="darkTheme"
@click=${this.toggleSetting}
?checked=${this.darkTheme}
?checked=${themeManager.isDarkMode}
/>
Dark Mode
</label>
Expand All @@ -162,7 +151,7 @@ export class Sandbox extends LitElement {
class="momentum-switch"
data-aspect="momentum"
@click=${this.toggleSetting}
?checked=${this.theme === "momentum"}
?checked=${themeManager.themeName === "momentum"}
/>
Momentum
</label>
Expand All @@ -173,7 +162,7 @@ export class Sandbox extends LitElement {
class="lumos-switch"
data-aspect="lumos"
@click=${this.toggleSetting}
?checked=${this.theme === "lumos"}
?checked=${themeManager.themeName === "lumos"}
/>
Lumos
</label>
Expand All @@ -184,7 +173,7 @@ export class Sandbox extends LitElement {
class="momentumv2-switch"
data-aspect="momentumV2"
@click=${this.toggleSetting}
?checked=${this.theme === "momentumV2"}
?checked=${themeManager.themeName === "momentumV2"}
/>
MomentumV2
</label>
Expand Down Expand Up @@ -260,7 +249,12 @@ export class Sandbox extends LitElement {

render() {
return html`
<md-theme class="theme-toggle" id="app-theme" ?darkTheme=${this.darkTheme} theme=${this.theme}>
<md-theme
class="theme-toggle"
id="app-theme"
?darkTheme=${themeManager.isDarkMode}
theme=${themeManager.themeName}
>
<div class="header-controls">${this.themeToggle()} ${this.containerColorOptionTemplate()}</div>
<md-tabs direction="vertical" class="explorer" persist-selection tabs-id="explorer">
Expand Down
75 changes: 75 additions & 0 deletions web-components/src/components/theme/ThemeManager.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import { action, computed, observable } from "mobx";
import { ThemeName } from "./Theme";

/**
* ThemeManager is a singleton class that manages the global theme state.
* It provides observable properties that can be observed by other classes
* to set properties on their components, such as whether dark mode is enabled.
*/
export class ThemeManager {
/**
* Observable property to indicate if dark mode is enabled
* Is needed by components styled outside of the web components
*/
@observable isDarkMode = false;

/**
* Observable property to store the current theme name
*/
@observable themeName: ThemeName = "lumos";

/**
* Observable property to indicate if visual rebrand is enabled
* Will be used to allow users to toggle to updated visuals
*/
@observable isVisualRebrandEnabled = false;

/**
* Observable property to indicate if Momentum Avatar is enabled
* Should be used to set the new momentum style on avatars and sue
* correct momentum presence states
*/
@observable isMomentumAvatarEnabled = false;

private static instance: ThemeManager;

/**
* Returns the singleton instance of ThemeManager.
* If the instance does not exist, it creates a new one.
* @returns {ThemeManager} The singleton instance of ThemeManager
*/
static getInstance(): ThemeManager {
if (!ThemeManager.instance) {
ThemeManager.instance = new ThemeManager();
}

return ThemeManager.instance;
}

@action setDarkMode(value: boolean) {
this.isDarkMode = value;
}

@action setThemeName(value: ThemeName) {
this.themeName = value;
}

@action setVisualRebrandEnabled(value: boolean) {
this.isVisualRebrandEnabled = value;
}

@action setMomentumAvatar(value: boolean) {
this.isMomentumAvatarEnabled = value;
}

/**
* Computed property to check if the current theme is Momentum V2.
* @returns {boolean} True if the current theme is Momentum V2, otherwise false
*/
@computed get isMomentumV2Enabled() {
return this.themeName === "momentumV2";
}
}

const themeManager = ThemeManager.getInstance();
export default themeManager;
1 change: 1 addition & 0 deletions web-components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export { TabPanel } from "./components/tabs/TabPanel";
export { Tabs } from "./components/tabs/Tabs";
export { TaskItem } from "./components/taskitem/TaskItem";
export { Theme, ThemeName } from "./components/theme/Theme";
export { ThemeManager, default as themeManager } from "./components/theme/ThemeManager";
export { TimePicker } from "./components/timepicker/TimePicker";
export { ToggleSwitch } from "./components/toggle-switch/ToggleSwitch";
export { Tooltip } from "./components/tooltip/Tooltip";
Expand Down

0 comments on commit 7fa3f4d

Please sign in to comment.