ngx-dev-toolbar 0.0.2-1 → 0.0.2-3

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

@@ -0,0 +1,10 @@
+export interface Flag {
+  id: string;
+  name: string;
+  description?: string;
+  link?: string;
+  isEnabled: boolean;
+  isForced: boolean;
+}
+
+export type FeatureFlagFilter = 'all' | 'forced' | 'enabled' | 'disabled';

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

@@ -0,0 +1,26 @@
+import { Injectable, inject } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DevToolsService } from '../../models/dev-tools.interface';
+import { DevToolbarInternalFeatureFlagService } from './feature-flags-internal.service';
+import { Flag } from './feature-flags.models';
+
+@Injectable({ providedIn: 'root' })
+export class DevToolbarFeatureFlagService implements DevToolsService<Flag> {
+  private internalService = inject(DevToolbarInternalFeatureFlagService);
+
+  /**
+   * Sets the available flags that will be displayed in the tool on the dev toolbar
+   * @param flags The flags to be displayed
+   */
+  setAvailableOptions(flags: Flag[]): void {
+    this.internalService.setAppFlags(flags);
+  }
+
+  /**
+   * Gets the flags that were forced/modified through the tool on the dev toolbar
+   * @returns Observable of forced flags array
+   */
+  getForcedValues(): Observable<Flag[]> {
+    return this.internalService.getForcedFlags();
+  }
+}

package/src/tools/home-tool/home-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/home-tool/home-tool.component.ts

@@ -0,0 +1,72 @@
+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-home-tool',
+  standalone: true,
+  imports: [DevToolbarToolComponent, FormsModule, DevToolbarButtonComponent],
+  template: `
+    <ndt-toolbar-tool [windowConfig]="windowConfig" title="Home" icon="angular">
+      <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]="true"
+                (click)="onToggleTheme()"
+                variant="icon"
+                [ariaLabel]="
+                  state.isDarkTheme()
+                    ? 'Switch to light theme'
+                    : 'Switch to dark theme'
+                "
+                [icon]="state.isDarkTheme() ? 'sun' : 'moon'"
+              />
+            </div>
+          </div>
+        </div>
+      </section>
+    </ndt-toolbar-tool>
+  `,
+  styleUrls: ['./home-tool.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevToolbarHomeToolComponent {
+  state = inject(DevToolbarStateService);
+  settingsService = inject(SettingsService);
+
+  readonly badge = input<string | number>();
+  readonly title = `Angular Dev Toolbar`;
+  readonly windowConfig: WindowConfig = {
+    title: this.title,
+    isClosable: true,
+    id: 'ndt-home',
+    size: 'medium',
+    description: '',
+    isBeta: true,
+  };
+
+  onToggleTheme(): void {
+    const newTheme: ThemeType = this.state.isDarkTheme() ? 'light' : 'dark';
+    this.settingsService.setSettings({ isDarkMode: newTheme === 'dark' });
+    this.state.setTheme(newTheme);
+  }
+}

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

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

package/src/tools/home-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/home-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/tools/language-tool/language-internal.service.ts

@@ -0,0 +1,51 @@
+import { Injectable, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { BehaviorSubject, Observable, map } from 'rxjs';
+import { DevToolsStorageService } from '../../utils/storage.service';
+import { Language } from './language.models';
+
+@Injectable({ providedIn: 'root' })
+export class DevToolbarInternalLanguageService {
+  private readonly STORAGE_KEY = 'language';
+  private readonly storageService = inject(DevToolsStorageService);
+
+  private languages$ = new BehaviorSubject<Language[]>([]);
+  private forcedLanguage$ = new BehaviorSubject<Language | null>(null);
+
+  public languages = toSignal(this.languages$, { initialValue: [] });
+
+  constructor() {
+    this.loadForcedLanguage();
+  }
+
+  setAppLanguages(languages: Language[]): void {
+    this.languages$.next(languages);
+  }
+
+  getAppLanguages(): Observable<Language[]> {
+    return this.languages$.asObservable();
+  }
+
+  setForcedLanguage(language: Language): void {
+    this.forcedLanguage$.next(language);
+    this.storageService.set(this.STORAGE_KEY, language);
+  }
+
+  getForcedLanguage(): Observable<Language[]> {
+    return this.forcedLanguage$.pipe(
+      map((language) => (language ? [language] : []))
+    );
+  }
+
+  removeForcedLanguage(): void {
+    this.forcedLanguage$.next(null);
+    this.storageService.remove(this.STORAGE_KEY);
+  }
+
+  private loadForcedLanguage(): void {
+    const savedLanguage = this.storageService.get<Language>(this.STORAGE_KEY);
+    if (savedLanguage) {
+      this.forcedLanguage$.next(savedLanguage);
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+.language-select {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+  justify-content: space-between;
+}

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

@@ -0,0 +1,75 @@
+import { Component, inject, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { firstValueFrom, map } from 'rxjs';
+import { DevToolbarSelectComponent } from '../../components/select/select.component';
+import { DevToolbarToolComponent } from '../../components/toolbar-tool/toolbar-tool.component';
+import { WindowSize } from '../../components/window/window.models';
+import { DevToolbarInternalLanguageService } from './language-internal.service';
+import { Language } from './language.models';
+
+@Component({
+  selector: 'ndt-language-tool',
+  standalone: true,
+  imports: [DevToolbarToolComponent, DevToolbarSelectComponent],
+  styleUrls: ['./language-tool.component.scss'],
+  template: `
+    <ndt-toolbar-tool
+      title="Languages"
+      icon="translate"
+      [windowConfig]="windowConfig"
+    >
+      <div class="language-select">
+        <label for="language-select">Language</label>
+        <ndt-select
+          id="language-select"
+          [value]="activeLanguage()"
+          [options]="languageOptions()"
+          [size]="'medium'"
+          (valueChange)="onLanguageChange($event ?? '')"
+        />
+      </div>
+    </ndt-toolbar-tool>
+  `,
+})
+export class DevToolbarLanguageToolComponent {
+  private readonly languageService = inject(DevToolbarInternalLanguageService);
+
+  protected readonly windowConfig = {
+    title: 'Languages',
+    description: 'Set the language for your current session',
+    isClosable: true,
+    size: 'small' as WindowSize,
+    id: 'ndt-language',
+    isBeta: true,
+  };
+
+  activeLanguage = signal<string>('not-forced');
+
+  languageOptions = toSignal(
+    this.languageService.getAppLanguages().pipe(
+      map((languages) => [
+        { value: 'not-forced', label: 'Not Forced' },
+        ...languages.map(({ id: value, name: label }) => ({
+          value,
+          label,
+        })),
+      ])
+    ),
+    { initialValue: [] }
+  );
+
+  async onLanguageChange(language: string): Promise<void> {
+    if (language === 'not-forced' || !language) {
+      this.languageService.removeForcedLanguage();
+      return;
+    }
+
+    const languages = await firstValueFrom(
+      this.languageService.getAppLanguages()
+    );
+    const selectedLanguage = languages.find(({ id }) => id === language);
+    if (selectedLanguage) {
+      this.languageService.setForcedLanguage(selectedLanguage as Language);
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+export interface Language {
+  id: string;
+  name: string;
+}

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

@@ -0,0 +1,26 @@
+import { inject, Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { DevToolsService } from '../../models/dev-tools.interface';
+import { DevToolbarInternalLanguageService } from './language-internal.service';
+import { Language } from './language.models';
+
+@Injectable({ providedIn: 'root' })
+export class DevToolbarLanguageService implements DevToolsService<Language> {
+  private internalService = inject(DevToolbarInternalLanguageService);
+
+  /**
+   * Sets the available languages that will be displayed in the tool on the dev toolbar
+   * @param languages The languages to be displayed
+   */
+  setAvailableOptions(languages: Language[]): void {
+    this.internalService.setAppLanguages(languages);
+  }
+
+  /**
+   * Gets the languages that were forced/modified through the tool on the dev toolbar
+   * @returns Observable of forced languages array
+   */
+  getForcedValues(): Observable<Language[]> {
+    return this.internalService.getForcedLanguage();
+  }
+}

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);
+  }
+}