ngx-dev-toolbar 1.0.0-beta.1 → 1.0.0

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

@@ -0,0 +1,261 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  signal,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DevToolbarInputComponent } from '../../components/input/input.component';
+import { DevToolbarSelectComponent } from '../../components/select/select.component';
+import { DevToolbarToolComponent } from '../../components/toolbar-tool/toolbar-tool.component';
+import { DevToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
+import { DevToolbarInternalFeatureFlagService } from './feature-flags-internal.service';
+import { DevToolbarFlag, FeatureFlagFilter } from './feature-flags.models';
+@Component({
+  selector: 'ndt-feature-flags-tool',
+  standalone: true,
+  imports: [
+    FormsModule,
+    DevToolbarToolComponent,
+    DevToolbarInputComponent,
+    DevToolbarSelectComponent,
+  ],
+  template: `
+    <ndt-toolbar-tool
+      [options]="options"
+      title="Feature Flags"
+      icon="toggle-left"
+    >
+      <div class="container">
+        <div class="header">
+          <ndt-input
+            [value]="searchQuery()"
+            (valueChange)="onSearchChange($event)"
+            placeholder="Search..."
+          />
+          <ndt-select
+            [value]="activeFilter()"
+            [options]="filterOptions"
+            [size]="'medium'"
+            (valueChange)="onFilterChange($event)"
+          />
+        </div>
+
+        @if (hasNoFlags()) {
+        <div class="empty">
+          <p>No flags found</p>
+        </div>
+        } @else if (hasNoFilteredFlags()) {
+        <div class="empty">
+          <p>No flags found matching your filter</p>
+        </div>
+        } @else {
+        <div class="flag-list">
+          @for (flag of filteredFlags(); track flag.id) {
+          <div class="flag">
+            <div class="info">
+              <h3>{{ flag.name }}</h3>
+              <p>{{ flag?.description }}</p>
+            </div>
+
+            <ndt-select
+              [value]="getFlagValue(flag)"
+              [options]="flagValueOptions"
+              [ariaLabel]="'Set value for ' + flag.name"
+              (valueChange)="onFlagChange(flag.id, $event ?? '')"
+              size="small"
+            />
+          </div>
+          }
+        </div>
+        }
+      </div>
+    </ndt-toolbar-tool>
+  `,
+  styles: [
+    `
+      .container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .header {
+        flex-shrink: 0;
+        display: flex;
+        gap: var(--ndt-spacing-sm);
+        margin-bottom: var(--ndt-spacing-md);
+
+        ndt-input {
+          flex: 0.65;
+        }
+
+        ndt-select {
+          flex: 0.35;
+        }
+      }
+
+      .empty {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ndt-spacing-md);
+        flex: 1;
+        min-height: 0;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid var(--ndt-warning-border);
+        border-radius: var(--ndt-border-radius-medium);
+        padding: var(--ndt-spacing-md);
+        background: var(--ndt-warning-background);
+        color: var(--ndt-text-muted);
+      }
+
+      .flag-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--ndt-spacing-md);
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding-right: var(--ndt-spacing-sm);
+
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: var(--ndt-background-secondary);
+          border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: var(--ndt-border-primary);
+          border-radius: 4px;
+
+          &:hover {
+            background: var(--ndt-hover-bg);
+          }
+        }
+
+        scrollbar-width: thin;
+        scrollbar-color: var(--ndt-border-primary)
+          var(--ndt-background-secondary);
+      }
+
+      .flag {
+        display: flex;
+        flex-direction: row;
+        gap: var(--ndt-spacing-sm);
+        background: var(--ndt-background-secondary);
+        .info {
+          flex: 0 0 65%;
+          h3 {
+            margin: 0;
+            font-size: var(--ndt-font-size-md);
+            color: var(--ndt-text-primary);
+          }
+
+          p {
+            font-size: var(--ndt-font-size-xs);
+            color: var(--ndt-text-muted);
+          }
+        }
+
+        ndt-select {
+          flex: 0 0 35%;
+        }
+      }
+    `,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevToolbarFeatureFlagsToolComponent {
+  // Injects
+  private readonly featureFlags = inject(DevToolbarInternalFeatureFlagService);
+
+  // Signals
+  protected readonly activeFilter = signal<FeatureFlagFilter>('all');
+  protected readonly searchQuery = signal<string>('');
+
+  protected readonly flags = this.featureFlags.flags;
+  protected readonly hasNoFlags = computed(() => this.flags().length === 0);
+  protected readonly filteredFlags = computed(() => {
+    return this.flags().filter((flag) => {
+      const searchTerm = this.searchQuery().toLowerCase();
+      const flagName = flag.name.toLowerCase();
+      const flagDescription = flag.description?.toLowerCase() ?? '';
+
+      const matchesSearch =
+        !this.searchQuery() ||
+        flagName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        flagDescription.toLowerCase().includes(searchTerm.toLowerCase());
+
+      const matchesFilter =
+        this.activeFilter() === 'all' ||
+        (this.activeFilter() === 'forced' && flag.isForced) ||
+        (this.activeFilter() === 'enabled' && flag.isEnabled) ||
+        (this.activeFilter() === 'disabled' && !flag.isEnabled);
+
+      return matchesSearch && matchesFilter;
+    });
+  });
+  protected readonly hasNoFilteredFlags = computed(
+    () => this.filteredFlags().length === 0
+  );
+
+  // Other properties
+  protected readonly options = {
+    title: 'Feature Flags',
+    description: 'Manage the feature flags for your current session',
+    isClosable: true,
+    size: 'tall',
+    id: 'ndt-feature-flags',
+    isBeta: true,
+  } as DevToolbarWindowOptions;
+
+  protected readonly filterOptions = [
+    { value: 'all', label: 'All Flags' },
+    { value: 'forced', label: 'Forced' },
+    { value: 'enabled', label: 'Enabled' },
+    { value: 'disabled', label: 'Disabled' },
+  ];
+
+  protected readonly flagValueOptions = [
+    { value: 'not-forced', label: 'Not Forced' },
+    { value: 'off', label: 'Forced Off' },
+    { value: 'on', label: 'Forced On' },
+  ];
+
+  // Public methods
+  onFilterChange(value: string | undefined): void {
+    const filter = this.filterOptions.find((f) => f.value === value);
+    if (filter) {
+      this.activeFilter.set(filter.value as FeatureFlagFilter);
+    }
+  }
+
+  onFlagChange(flagId: string, value: string): void {
+    switch (value) {
+      case 'not-forced':
+        this.featureFlags.removeFlagOverride(flagId);
+        break;
+      case 'on':
+        this.featureFlags.setFlag(flagId, true);
+        break;
+      case 'off':
+        this.featureFlags.setFlag(flagId, false);
+        break;
+    }
+  }
+
+  onSearchChange(query: string): void {
+    this.searchQuery.set(query);
+  }
+
+  // Protected methods
+  protected getFlagValue(flag: DevToolbarFlag): string {
+    if (!flag.isForced) return '';
+    return flag.isEnabled ? 'on' : 'off';
+  }
+}

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

@@ -0,0 +1,10 @@
+export interface DevToolbarFlag {
+  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,28 @@
+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 { DevToolbarFlag } from './feature-flags.models';
+
+@Injectable({ providedIn: 'root' })
+export class DevToolbarFeatureFlagService
+  implements DevToolsService<DevToolbarFlag>
+{
+  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: DevToolbarFlag[]): 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<DevToolbarFlag[]> {
+    return this.internalService.getForcedFlags();
+  }
+}

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

@@ -0,0 +1,67 @@
+@use '../../styles' as *;
+
+.settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100%;
+}
+
+.instruction {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--ndt-spacing-md);
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ndt-spacing-xs);
+
+    &-text {
+      color: var(--ndt-text-primary);
+      font-size: var(--ndt-font-size-sm);
+      font-weight: 500;
+    }
+
+    &-description {
+      color: var(--ndt-text-muted);
+      font-size: var(--ndt-font-size-xs);
+    }
+  }
+
+  &__control {
+    flex: 1;
+  }
+}
+
+.instruction__control-button {
+  display: flex;
+  gap: var(--ndt-spacing-xs);
+  justify-content: flex-end;
+}
+.settings-container {
+  display: flex;
+  flex-direction: column;
+
+  .settings-actions {
+    display: flex;
+    gap: var(--ndt-spacing-md);
+    padding-block: var(--ndt-spacing-md);
+
+    > * {
+      width: 50%;
+      min-width: 0;
+    }
+  }
+}
+
+.footer-links {
+  border-top: 1px solid var(--ndt-border-subtle);
+  padding-top: 1em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: var(--ndt-spacing-lg);
+  // padding-block: var(--ndt-spacing-md);
+}

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

@@ -0,0 +1,197 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  inject,
+  input,
+} from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { DevToolbarButtonComponent } from '../../components/button/button.component';
+import { DevToolbarClickableCardComponent } from '../../components/clickable-card/clickable-card.component';
+import { DevToolbarLinkButtonComponent } from '../../components/link-button/link-button.component';
+import { DevToolbarToolComponent } from '../../components/toolbar-tool/toolbar-tool.component';
+import { DevToolbarWindowOptions } from '../../components/toolbar-tool/toolbar-tool.models';
+import { DevToolbarStateService } from '../../dev-toolbar-state.service';
+import { DevToolsStorageService } from '../../utils/storage.service';
+import { SettingsService } from './settings.service';
+
+type ThemeType = 'light' | 'dark';
+
+@Component({
+  selector: 'ndt-home-tool',
+  standalone: true,
+  imports: [
+    DevToolbarToolComponent,
+    FormsModule,
+    DevToolbarButtonComponent,
+    DevToolbarClickableCardComponent,
+    DevToolbarLinkButtonComponent,
+  ],
+  template: `
+    <ndt-toolbar-tool [options]="options" 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="instruction__control-button">
+              <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>
+
+        <div class="settings-container">
+          <div class="instruction">
+            <div class="instruction__label">
+              <span class="instruction__label-text">Reset Settings</span>
+              <span class="instruction__label-description">
+                Reset all settings to their default values
+              </span>
+            </div>
+            <div class="instruction__control">
+              <div class="instruction__control-button">
+                <ndt-button
+                  variant="icon"
+                  icon="trash"
+                  ariaLabel="Reset all settings"
+                  (click)="onResetSettings()"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="settings-actions">
+            <ndt-clickable-card
+              icon="export"
+              title="Export Settings"
+              subtitle="Export the current settings to share with other devs or use in your tests"
+              (click)="onExportSettings()"
+            />
+            <ndt-clickable-card
+              icon="import"
+              title="Import Settings"
+              subtitle="Import settings to reproduce a scenario"
+              (click)="onImportSettings()"
+            />
+          </div>
+        </div>
+
+        <div class="footer-links">
+          @for (link of links; track link.url) {
+          <ndt-link-button [icon]="link.icon" [url]="link.url">
+            {{ link.label }}
+          </ndt-link-button>
+          }
+        </div>
+      </section>
+    </ndt-toolbar-tool>
+  `,
+  styleUrls: ['./home-tool.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevToolbarHomeToolComponent {
+  protected readonly state = inject(DevToolbarStateService);
+  private readonly settingsService = inject(SettingsService);
+  private readonly storageService = inject(DevToolsStorageService);
+
+  readonly badge = input<string | number>();
+  readonly title = `Angular Dev Toolbar`;
+  readonly options: DevToolbarWindowOptions = {
+    title: this.title,
+    isClosable: true,
+    id: 'ndt-home',
+    size: 'medium',
+    description: '',
+    isBeta: true,
+  };
+
+  readonly links = [
+    {
+      icon: 'bug',
+      url: 'https://github.com/alfredoperez/ngx-dev-toolbar/issues',
+      label: 'Bug report',
+    },
+    {
+      icon: 'lightbulb',
+      url: 'https://github.com/alfredoperez/ngx-dev-toolbar/discussions',
+      label: 'Suggestions',
+    },
+    {
+      icon: 'docs',
+      url: 'https://alfredoperez.github.io/ngx-dev-toolbar/',
+      label: 'Docs',
+    },
+    {
+      icon: 'star',
+      url: 'https://github.com/alfredoperez/ngx-dev-toolbar',
+      label: 'Star on GitHub',
+    },
+    {
+      icon: 'discord',
+      url: 'https://discord.com/invite/angular',
+      label: 'Community',
+    },
+  ] as const;
+
+  onToggleTheme(): void {
+    const newTheme: ThemeType = this.state.isDarkTheme() ? 'light' : 'dark';
+    this.settingsService.setSettings({ isDarkMode: newTheme === 'dark' });
+    this.state.setTheme(newTheme);
+  }
+
+  onExportSettings(): void {
+    const settings = this.storageService.getAllSettings();
+    const blob = new Blob([JSON.stringify(settings, null, 2)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    const timestamp = new Date().toISOString().split('T')[0];
+    link.href = url;
+    link.download = `ngx-dev-toolbar-settings-${timestamp}.json`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
+  onImportSettings(): void {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = 'application/json';
+    input.onchange = (event) => {
+      const file = (event.target as HTMLInputElement).files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          try {
+            const settings = JSON.parse(e.target?.result as string);
+            this.storageService.setAllSettings(settings);
+            window.location.reload();
+          } catch (error) {
+            console.error('Error importing settings:', error);
+          }
+        };
+        reader.readAsText(file);
+      }
+    };
+    input.click();
+  }
+
+  onResetSettings(): void {
+    this.storageService.clearAllSettings();
+    window.location.reload();
+  }
+}

package/{tools/settings-tool/settings.models.d.ts → src/tools/home-tool/settings.models.ts}

@@ -1,3 +1,3 @@
 export interface Settings {
-    isDarkMode: boolean;
+  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);
+    }
+  }
+}