ngx-dev-toolbar 1.0.3 → 1.0.5

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

@@ -1,261 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,67 +0,0 @@
-@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

@@ -1,197 +0,0 @@
-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/src/tools/home-tool/settings.service.spec.ts

@@ -1,59 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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);
-    }
-  }
-}