ngx-dev-toolbar 0.0.2-1 → 0.0.2-2

package/src/tools/feature-flags-tool/feature-flags.service.ts

@@ -0,0 +1,110 @@
+import { Injectable, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Observable, combineLatest, map } from 'rxjs';
+import { DevToolsStorageService } from '../../utils/storage.service';
+import { Flag } from './feature-flags.models';
+
+interface ForcedFlagsState {
+  enabled: string[];
+  disabled: string[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class DevToolbarFeatureFlagsService {
+  private readonly STORAGE_KEY = 'feature-flags';
+  private storageService = inject(DevToolsStorageService);
+
+  /**
+   * App flags are the flags that are currently in the app
+   */
+  private appFlags$ = new BehaviorSubject<Flag[]>([]);
+
+  /**
+   * Forced flags are the flags that are currently forced in the app
+   */
+  private forcedFlagsSubject = new BehaviorSubject<ForcedFlagsState>({
+    enabled: [],
+    disabled: [],
+  });
+
+  private readonly forcedFlags$ = this.forcedFlagsSubject.asObservable();
+  /**
+   * Flags with the forced flag status
+   */
+  public flags$: Observable<Flag[]> = combineLatest([
+    this.appFlags$,
+    this.forcedFlags$,
+  ]).pipe(
+    map(([appFlags, { enabled, disabled }]) => {
+      return appFlags.map((flag) => ({
+        ...flag,
+        isForced: enabled.includes(flag.id) || disabled.includes(flag.id),
+        isEnabled: enabled.includes(flag.id),
+      }));
+    })
+  );
+
+  public flags = toSignal(this.flags$, { initialValue: [] });
+
+  constructor() {
+    this.loadForcedFlags();
+  }
+
+  public set(flags: Flag[]): void {
+    this.appFlags$.next(flags);
+  }
+
+  /**
+   * This is used by the app that uses the dev toolbar and
+   * helps to set the flags that can be overridden by the dev toolbar
+   * @param flags - The flags to set
+   */
+  public setAppFlags(flags: Flag[]): void {
+    this.appFlags$.next(flags);
+  }
+
+  public getAppFlags(): Observable<Flag[]> {
+    return this.appFlags$.asObservable();
+  }
+
+  public setFlag(flagId: string, isEnabled: boolean): void {
+    const { enabled, disabled } = this.forcedFlagsSubject.value;
+
+    // Remove from both arrays first
+    const newEnabled = enabled.filter((id) => id !== flagId);
+    const newDisabled = disabled.filter((id) => id !== flagId);
+
+    // Add to appropriate array
+    if (isEnabled) {
+      newEnabled.push(flagId);
+    } else {
+      newDisabled.push(flagId);
+    }
+
+    const newState = { enabled: newEnabled, disabled: newDisabled };
+    this.forcedFlagsSubject.next(newState);
+    this.storageService.set(this.STORAGE_KEY, newState);
+  }
+
+  public removeFlagOverride(flagId: string): void {
+    const { enabled, disabled } = this.forcedFlagsSubject.value;
+
+    const newState = {
+      enabled: enabled.filter((id) => id !== flagId),
+      disabled: disabled.filter((id) => id !== flagId),
+    };
+
+    this.forcedFlagsSubject.next(newState);
+    this.storageService.set(this.STORAGE_KEY, newState);
+  }
+
+  private loadForcedFlags(): void {
+    const savedFlags = this.storageService.get<ForcedFlagsState>(
+      this.STORAGE_KEY
+    );
+
+    if (savedFlags) {
+      this.forcedFlagsSubject.next(savedFlags);
+    }
+  }
+}

package/src/tools/index.ts

@@ -0,0 +1,5 @@
+export * from './feature-flags-tool/feature-flags-tool.component';
+export * from './feature-flags-tool/feature-flags.models';
+export * from './feature-flags-tool/feature-flags.service';
+
+export * from './settings-tool/settings-tool.component';

package/src/tools/settings-tool/settings-tool.component.scss

@@ -0,0 +1,61 @@
+@use '../../styles' as *;
+
+.settings {
+  padding: var(--devtools-spacing-md);
+}
+
+.instruction {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--devtools-spacing-md);
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--devtools-spacing-xs);
+
+    &-text {
+      color: var(--devtools-text-primary);
+      font-size: var(--devtools-font-size-sm);
+      font-weight: 500;
+    }
+
+    &-description {
+      color: var(--devtools-text-muted);
+      font-size: var(--devtools-font-size-xs);
+    }
+  }
+}
+
+.theme {
+  display: flex;
+  gap: var(--devtools-spacing-xs);
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--devtools-spacing-xs);
+    border-radius: var(--devtools-border-radius-small);
+    border: 1px solid var(--devtools-border-subtle);
+    background: var(--devtools-bg-primary);
+    color: var(--devtools-text-primary);
+    cursor: pointer;
+    transition: var(--devtools-transition-default);
+
+    &:hover {
+      background: var(--devtools-hover-bg);
+    }
+
+    &--active {
+      background: var(--devtools-primary);
+      color: var(--devtools-text-on-primary);
+      border-color: var(--devtools-primary);
+
+      &:hover {
+        background: var(--devtools-primary);
+      }
+    }
+  }
+}

package/src/tools/settings-tool/settings-tool.component.ts

@@ -0,0 +1,76 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DevToolbarButtonComponent } from '../../components/button/button.component';
+import { DevToolbarToolComponent } from '../../components/toolbar-tool/toolbar-tool.component';
+import { WindowConfig } from '../../components/window/window.models';
+import { DevToolbarStateService } from '../../dev-toolbar-state.service';
+import { SettingsService } from './settings.service';
+
+type ThemeType = 'light' | 'dark';
+
+@Component({
+  selector: 'ndt-settings-tool',
+  standalone: true,
+  imports: [DevToolbarToolComponent, FormsModule, DevToolbarButtonComponent],
+  template: `
+    <ndt-toolbar-tool
+      [windowConfig]="windowConfig"
+      title="Settings"
+      icon="gear"
+    >
+      <section class="settings">
+        <div class="instruction">
+          <div class="instruction__label">
+            <span class="instruction__label-text">Theme</span>
+            <span class="instruction__label-description">
+              Switch between light and dark mode
+            </span>
+          </div>
+          <div class="instruction__control">
+            <div class="theme">
+              <ndt-button
+                [isActive]="!state.isDarkTheme()"
+                (click)="onThemeSelect('light')"
+                variant="icon"
+                ariaLabel="Switch to light theme"
+                icon="sun"
+              />
+              <ndt-button
+                [isActive]="state.isDarkTheme()"
+                (click)="onThemeSelect('dark')"
+                variant="icon"
+                ariaLabel="Switch to dark theme"
+                icon="moon"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+    </ndt-toolbar-tool>
+  `,
+  styleUrls: ['./settings-tool.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevToolbarSettingsToolComponent {
+  state = inject(DevToolbarStateService);
+  settingsService = inject(SettingsService);
+
+  readonly badge = input<string | number>();
+  readonly windowConfig: WindowConfig = {
+    title: 'Settings',
+    isClosable: true,
+    id: 'ndt-settings',
+    description: 'Configure the settings for the Dev Toolbar',
+    isBeta: true,
+  };
+
+  onThemeSelect(theme: ThemeType): void {
+    this.settingsService.setSettings({ isDarkMode: theme === 'dark' });
+    this.state.setTheme(theme);
+  }
+}

package/src/tools/settings-tool/settings.models.ts

@@ -0,0 +1,3 @@
+export interface Settings {
+  isDarkMode: boolean;
+}

package/src/tools/settings-tool/settings.service.spec.ts

@@ -0,0 +1,59 @@
+import { TestBed } from '@angular/core/testing';
+import { DevToolsStorageService } from '../../utils/storage.service';
+import { SettingsService } from './settings.service';
+
+describe('SettingsService', () => {
+  let service: SettingsService;
+  let storageServiceMock: DevToolsStorageService;
+
+  beforeEach(() => {
+    storageServiceMock = {
+      get: vi.fn(),
+      set: vi.fn(),
+    } as unknown as DevToolsStorageService;
+
+    TestBed.configureTestingModule({
+      providers: [
+        SettingsService,
+        { provide: DevToolsStorageService, useValue: storageServiceMock },
+      ],
+    });
+
+    service = TestBed.inject(SettingsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('getSettings', () => {
+    it('should return settings from storage if they exist', () => {
+      const mockSettings = { isDarkMode: true };
+      vi.spyOn(storageServiceMock, 'get').mockReturnValue(mockSettings);
+
+      const result = service.getSettings();
+
+      expect(storageServiceMock.get).toHaveBeenCalledWith('settings');
+      expect(result).toEqual(mockSettings);
+    });
+
+    it('should return default settings if nothing in storage', () => {
+      vi.spyOn(storageServiceMock, 'get').mockReturnValue(null);
+
+      const result = service.getSettings();
+
+      expect(storageServiceMock.get).toHaveBeenCalledWith('settings');
+      expect(result).toEqual({ isDarkMode: false });
+    });
+  });
+
+  describe('setSettings', () => {
+    it('should save settings to storage', () => {
+      const settings = { isDarkMode: true };
+
+      service.setSettings(settings);
+
+      expect(storageServiceMock.set).toHaveBeenCalledWith('settings', settings);
+    });
+  });
+});

package/src/tools/settings-tool/settings.service.ts

@@ -0,0 +1,21 @@
+import { Injectable, inject } from '@angular/core';
+import { DevToolsStorageService } from '../../utils/storage.service';
+import { Settings } from './settings.models';
+
+@Injectable({ providedIn: 'root' })
+export class SettingsService {
+  private readonly STORAGE_KEY = 'settings';
+  private readonly storageService = inject(DevToolsStorageService);
+
+  public getSettings(): Settings {
+    return (
+      this.storageService.get<Settings>(this.STORAGE_KEY) || {
+        isDarkMode: false,
+      }
+    );
+  }
+
+  public setSettings(settings: Settings): void {
+    this.storageService.set(this.STORAGE_KEY, settings);
+  }
+}

package/src/utils/storage.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class DevToolsStorageService {
+  private readonly prefix = 'ndt-';
+
+  public set<T>(key: string, value: T): void {
+    localStorage.setItem(this.prefix + key, JSON.stringify(value));
+  }
+
+  public get<T>(key: string): T | null {
+    const item = localStorage.getItem(this.prefix + key);
+    return item ? JSON.parse(item) : null;
+  }
+
+  public remove(key: string): void {
+    localStorage.removeItem(this.prefix + key);
+  }
+}