apphouse/dist/themes/ThemeUpdatesTracker.ts

Component library for React that uses observable state management and theme-able components.

import { makeAutoObservable } from "mobx";

class ThemeUpdate {
  loading: boolean;
  saving: boolean;
  updatedAt: number;

  constructor() {
    this.loading = false;
    this.saving = false;
    this.updatedAt = 0;
    makeAutoObservable(this);
  }

  setSaving = (value: boolean) => {
    this.saving = value;
  };

  setLoading = (value: boolean) => {
    this.loading = value;
  };

  setLastSavedTime = (value: number) => {
    this.updatedAt = value;
  };
}

/**
 * Class to keep track of updates in the theme
 */
export class ThemeUpdatesTracker {
  theme: ThemeUpdate;
  colors: ThemeUpdate;
  tokens: ThemeUpdate;
  styles: ThemeUpdate;
  saving: boolean;

  constructor() {
    this.saving = false;
    this.theme = new ThemeUpdate();
    this.colors = new ThemeUpdate();
    this.tokens = new ThemeUpdate();
    this.styles = new ThemeUpdate();
    makeAutoObservable(this);
  }

  setSaving = (value: boolean) => {
    this.saving = value;
  };
}