feat(key-storage): adds key-storage feature

Author: geometricpanda

Diff for: apps/www/src/app/app.module.ts

@@ -1,9 +1,9 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {RouterModule} from '@angular/router';
 
-import { AppComponent } from './app.component';
-import { appRoutes } from './app.routes';
+import {AppComponent} from './app.component';
+import {appRoutes} from './app.routes';
 import {MastheadComponent} from "./components/masthead";
 
 @NgModule({
@@ -16,4 +16,5 @@ import {MastheadComponent} from "./components/masthead";
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+}

Diff for: apps/www/src/app/components/masthead/masthead.component.ts

@@ -1,12 +1,11 @@
-import {Component, HostBinding, OnDestroy} from "@angular/core";
+import {Component, HostBinding, OnDestroy, OnInit} from "@angular/core";
 import {FormControl, ReactiveFormsModule} from "@angular/forms";
+import {Subscription} from "rxjs";
 import {SegmentedControlButtonComponent, SegmentedControlComponent} from "../segmented-control";
 import {RadioValueAccessorDirective} from "../../library-components/directives";
 import {ColorModeService, ColourMode} from "../../library-components/services";
 import {ContainerComponent} from "../container";
 import {IconComponent} from "../icon";
-import {distinctUntilChanged} from "rxjs";
-
 
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
@@ -23,24 +22,15 @@ import {distinctUntilChanged} from "rxjs";
   ],
   standalone: true
 })
-export class MastheadComponent implements OnDestroy {
+export class MastheadComponent implements OnInit, OnDestroy {
   protected ColorMode = ColourMode;
+  protected mode = new FormControl(ColourMode.AUTO);
   protected expanded = false;
-  protected mode = new FormControl<ColourMode>(ColourMode.AUTO);
-
-  protected mode$ = this.mode
-    .valueChanges
-    .pipe(distinctUntilChanged())
-    .subscribe((value) => value
-      ? this.colorModeService.set(value)
-      : this.colorModeService.set(ColourMode.AUTO));
 
-  protected globalMode$ = this.colorModeService
-    .asObservable
-    .subscribe((value) => this.mode.setValue(value))
+  private mode$!: Subscription;
+  private storageMode$!: Subscription;
 
-  @HostBinding('class.masthead')
-  readonly hbClassMasthead = true;
+  @HostBinding('class.masthead') readonly hbClassMasthead = true;
 
   @HostBinding('class.masthead--expanded')
   get hbClassMastheadExpanded() {
@@ -50,11 +40,25 @@ export class MastheadComponent implements OnDestroy {
   constructor(protected colorModeService: ColorModeService) {
   }
 
+  ngOnInit() {
+    this.mode$ = this.mode.valueChanges.subscribe(this.onValueChange);
+    this.storageMode$ = this.colorModeService.asObservable.subscribe(this.onStorageChange);
+  }
+
   ngOnDestroy() {
     this.mode$.unsubscribe();
-    this.globalMode$.unsubscribe();
+    this.storageMode$.unsubscribe();
   }
 
+  onStorageChange = (value: ColourMode) => {
+    this.mode.setValue(value);
+  }
+
+  onValueChange = (value: ColourMode | null) =>
+    value
+      ? this.colorModeService.set(value)
+      : this.colorModeService.set(ColourMode.AUTO)
+
   toggleExpanded() {
     this.expanded = !this.expanded;
   }

Diff for: apps/www/src/app/library-components/services/color-mode.service.ts

@@ -0,0 +1,56 @@
+import {Inject, Injectable} from "@angular/core";
+import {DOCUMENT} from "@angular/common";
+import {BehaviorSubject, distinctUntilChanged} from "rxjs";
+
+import {ColorModeStore} from "./color-mode.storage";
+import {ColourMode} from "./storage-mode.interface";
+
+import type {KeyStorage} from "../../utilities/key-storage";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ColorModeService {
+  private _mode = new BehaviorSubject<ColourMode>(this.storage.getItem());
+  public asObservable = this._mode.pipe(distinctUntilChanged());
+  public value = this._mode.value;
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    @Inject(ColorModeStore) private storage: KeyStorage<ColourMode>,
+  ) {
+  }
+
+  public set(mode: ColourMode) {
+    if (mode === ColourMode.LIGHT) {
+      return this.setLight();
+    }
+
+    if (mode === ColourMode.DARK) {
+      return this.setDark();
+    }
+
+    return this.setAuto();
+  }
+
+  private setAuto() {
+    this._mode.next(ColourMode.AUTO);
+    this.storage.clear();
+    this.document.body.classList?.remove(ColourMode.LIGHT);
+    this.document.body.classList?.remove(ColourMode.DARK);
+  }
+
+  private setDark() {
+    this._mode.next(ColourMode.DARK);
+    this.storage.setItem(ColourMode.DARK);
+    this.document.body.classList?.remove(ColourMode.LIGHT);
+    this.document.body.classList?.add(ColourMode.DARK);
+  }
+
+  private setLight() {
+    this._mode.next(ColourMode.LIGHT);
+    this.storage.setItem(ColourMode.LIGHT);
+    this.document.body.classList?.remove(ColourMode.DARK);
+    this.document.body.classList?.add(ColourMode.LIGHT);
+  }
+}

Diff for: apps/www/src/app/library-components/services/color-mode/color-mode.service.ts

@@ -0,0 +1,4 @@
+import {createKeyStorage} from "../../utilities/key-storage";
+import {ColourMode} from "./storage-mode.interface";
+
+export const ColorModeStore = createKeyStorage<ColourMode>('color-mode', ColourMode.AUTO);

Diff for: apps/www/src/app/library-components/services/color-mode/color-mode.storage.ts

@@ -0,0 +1,3 @@
+export * from './color-mode.service';
+export * from './color-mode.storage';
+export * from './storage-mode.interface';

Diff for: apps/www/src/app/library-components/services/color-mode/index.ts

@@ -0,0 +1,6 @@
+export enum ColourMode {
+  LIGHT = 'light',
+  DARK = 'dark',
+  AUTO = 'auto'
+}
+

Diff for: apps/www/src/app/library-components/services/color-mode/storage-mode.interface.ts

@@ -1 +1 @@
-export * from './color-mode.service';
+export * from './color-mode';

Diff for: apps/www/src/app/library-components/services/index.ts

@@ -0,0 +1,15 @@
+import {InjectionToken} from "@angular/core";
+import {KeyStorage} from "./key-storage";
+import {localStorageStore} from "./stores";
+
+export const createKeyStorage = <T = unknown>(
+  key: string,
+  defaultValue: T,
+  store: Storage = localStorageStore,
+) =>
+  new InjectionToken(
+    `storage-key-${key}`, {
+      providedIn: 'root',
+      factory: () => new KeyStorage<T>(key, defaultValue, store)
+    });
+

Diff for: apps/www/src/app/library-components/utilities/key-storage/create-key-storage.ts

@@ -0,0 +1,3 @@
+export * from './stores';
+export * from './key-storage';
+export * from './create-key-storage';

Diff for: apps/www/src/app/library-components/utilities/key-storage/index.ts

@@ -0,0 +1,26 @@
+export class KeyStorage<T = unknown> {
+
+  constructor(
+    private _key: string,
+    private _defaultValue: T,
+    private _store: Storage,
+  ) {
+  }
+
+  getItem(): T {
+    const data = this._store.getItem(this._key);
+    return data
+      ? JSON.parse(data)
+      : this._defaultValue;
+  }
+
+  setItem(value: T): void {
+    const data = JSON.stringify(value);
+    this._store.setItem(this._key, data);
+  }
+
+  clear(): void {
+    this._store.removeItem(this._key);
+  }
+
+}

Diff for: apps/www/src/app/library-components/utilities/key-storage/key-storage.ts

@@ -0,0 +1,30 @@
+export class InMemoryStore implements Storage {
+  private store = new Map<string, string>()
+
+  get length(): number {
+    return this.store.size;
+  }
+
+  key(index: number): string | null {
+    const keys = Object.keys(Object.fromEntries(this.store));
+    return keys[index] || null;
+  }
+
+  getItem(key: string): string | null {
+    return this.store.get(key) || null;
+  }
+
+  setItem(key: string, value: string): void {
+    this.store.set(key, value);
+  }
+
+  removeItem(key: string): void {
+    this.store.delete(key);
+  }
+
+  clear(): void {
+    this.store.clear();
+  }
+}
+
+export const inMemoryStore = new InMemoryStore();

Diff for: apps/www/src/app/library-components/utilities/key-storage/stores/in-memory.store.ts

@@ -0,0 +1,2 @@
+export * from './in-memory.store';
+export * from './local-storage.store';

Diff for: apps/www/src/app/library-components/utilities/key-storage/stores/index.ts

@@ -0,0 +1,36 @@
+import {inMemoryStore} from "./in-memory.store";
+
+/**
+ * LocalStorageStore
+ * Falls back to in-memory storage if local storage isn't available
+ */
+export class LocalStorageStore implements Storage {
+
+  private _store = globalThis.localStorage || inMemoryStore;
+
+  get length(): number {
+    return this._store.length
+  }
+
+  key(index: number): string | null {
+    return this._store.key(index);
+  }
+
+  getItem(key: string): string | null {
+    return this._store.getItem(key);
+  }
+
+  setItem(key: string, value: string): void {
+    return this._store.setItem(key, value);
+  }
+
+  removeItem(key: string): void {
+    return this._store.removeItem(key);
+  }
+
+  clear(): void {
+    return this._store.clear();
+  }
+}
+
+export const localStorageStore = new LocalStorageStore();