ngx-dev-toolbar 1.0.2 → 1.0.4

package/src/styles.scss

@@ -1,342 +0,0 @@
-@use 'sass:map';
-// Color primitives
-$color-black-900: rgb(17, 24, 39); // darkest
-$color-black-800: rgb(19, 21, 26);
-$color-gray-700: rgb(55, 65, 81);
-$color-gray-600: rgb(107, 114, 128);
-$color-gray-500: rgb(156, 163, 175);
-$color-gray-300: rgb(229, 231, 235);
-$color-gray-200: rgb(243, 244, 246);
-$color-white: rgb(255, 255, 255);
-$color-red-600: rgb(220, 38, 38); // dark red
-$color-red-500: rgb(239, 68, 68); // light red
-$color-blue-100: rgb(219, 234, 254);
-$color-blue-600: rgb(37, 99, 235);
-$color-yellow-100: rgb(254, 249, 195);
-$color-yellow-600: rgb(202, 138, 4);
-$color-red-100: rgb(254, 226, 226);
-// Colors and Themes
-$colors: (
-  dark: (
-    background: (
-      primary: $color-black-900,
-      gradient:
-        linear-gradient(
-          180deg,
-          $color-black-800 0%,
-          rgba($color-black-800, 0.88) 100%
-        ),
-    ),
-    text: (
-      primary: $color-white,
-      secondary: $color-gray-300,
-      muted: $color-gray-500,
-    ),
-    border: (
-      primary: #343841,
-      subtle: rgba($color-white, 0.1),
-    ),
-    hover: (
-      background: rgba($color-white, 0.12),
-      danger: $color-red-600,
-    ),
-    annotation: (
-      note: (
-        background: rgba($color-blue-600, 0.15),
-        border: rgba($color-blue-600, 0.3),
-      ),
-      warning: (
-        background: rgba($color-yellow-600, 0.15),
-        border: rgba($color-yellow-600, 0.3),
-      ),
-      error: (
-        background: rgba($color-red-600, 0.15),
-        border: rgba($color-red-600, 0.3),
-      ),
-    ),
-  ),
-  light: (
-    background: (
-      primary: $color-white,
-      gradient:
-        linear-gradient(
-          180deg,
-          $color-gray-200 0%,
-          rgba($color-gray-200, 0.88) 100%
-        ),
-    ),
-    text: (
-      primary: $color-black-900,
-      secondary: $color-gray-700,
-      muted: $color-gray-600,
-    ),
-    border: (
-      primary: #e5e7eb,
-      subtle: rgba($color-black-900, 0.1),
-    ),
-    hover: (
-      background: rgba($color-black-900, 0.05),
-      danger: $color-red-500,
-    ),
-    annotation: (
-      note: (
-        background: $color-blue-100,
-        border: rgba($color-blue-600, 0.2),
-      ),
-      warning: (
-        background: $color-yellow-100,
-        border: rgba($color-yellow-600, 0.2),
-      ),
-      error: (
-        background: $color-red-100,
-        border: rgba($color-red-600, 0.2),
-      ),
-    ),
-  ),
-);
-
-// Shadows
-$shadow-themes: (
-  dark: (
-    toolbar: 0 2px 8px rgba(19, 21, 26, 0.3),
-    tooltip: (
-      0 0 0 1px rgba(255, 255, 255, 0.1),
-      0 4px 8px rgba(0, 0, 0, 0.4),
-      0 2px 4px rgba(0, 0, 0, 0.3),
-    ),
-    window: (
-      0px 0px 0px 0px rgba(19, 21, 26, 0.3),
-      0px 1px 2px 0px rgba(19, 21, 26, 0.29),
-      0px 4px 4px 0px rgba(19, 21, 26, 0.26),
-      0px 10px 6px 0px rgba(19, 21, 26, 0.15),
-      0px 17px 7px 0px rgba(19, 21, 26, 0.04),
-      0px 26px 7px 0px rgba(19, 21, 26, 0.01),
-    ),
-  ),
-  light: (
-    toolbar: 0 2px 8px rgba(156, 163, 175, 0.2),
-    tooltip: (
-      0 0 0 1px rgba(17, 24, 39, 0.05),
-      0 4px 8px rgba(107, 114, 128, 0.15),
-      0 2px 4px rgba(107, 114, 128, 0.1),
-    ),
-    window: (
-      0px 0px 0px 0px rgba(156, 163, 175, 0.1),
-      0px 1px 2px 0px rgba(156, 163, 175, 0.12),
-      0px 4px 4px 0px rgba(156, 163, 175, 0.1),
-      0px 10px 6px 0px rgba(156, 163, 175, 0.08),
-      0px 17px 7px 0px rgba(156, 163, 175, 0.05),
-      0px 26px 7px 0px rgba(156, 163, 175, 0.02),
-    ),
-  ),
-);
-
-// Typography
-$font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-  'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-
-// Add font size variables
-$font-sizes: (
-  xs: 0.75rem,
-  sm: 0.875rem,
-  md: 1rem,
-  lg: 1.25rem,
-  xl: 2rem,
-);
-
-// Dimensions
-$dimensions: (
-  toolbar-height: 40px,
-  toolbar-button-width: 44px,
-  window-max-width: 640px,
-  window-max-height: 480px,
-  border-radius: (
-    small: 4px,
-    medium: 8px,
-    large: 12px,
-    full: 9999px,
-  ),
-);
-
-// Transitions
-$transitions: (
-  default: all 0.2s ease-out,
-  smooth: all 0.2s ease-in-out,
-);
-
-// Z-indices
-$z-indices: (
-  toolbar: 999999,
-  window: 999999999,
-);
-
-// Create a mixin for the CSS variables that can be used by components
-@mixin devtools-theme {
-  --ndt-border-radius-small: #{map.get(
-      map.get($dimensions, border-radius),
-      small
-    )};
-  --ndt-border-radius-medium: #{map.get(
-      map.get($dimensions, border-radius),
-      medium
-    )};
-  --ndt-border-radius-large: #{map.get(
-      map.get($dimensions, border-radius),
-      large
-    )};
-
-  --ndt-transition-default: #{map.get($transitions, default)};
-  --ndt-transition-smooth: #{map.get($transitions, smooth)};
-
-  --ndt-bg-primary: #{map.get(map.get($colors, light), background, primary)};
-  --ndt-bg-gradient: #{map.get(map.get($colors, light), background, gradient)};
-  --ndt-text-primary: #{map.get(map.get($colors, light), text, primary)};
-  --ndt-text-secondary: #{map.get(map.get($colors, light), text, secondary)};
-  --ndt-text-muted: #{map.get(map.get($colors, light), text, muted)};
-  --ndt-border-primary: #{map.get(map.get($colors, light), border, primary)};
-  --ndt-border-subtle: #{map.get(map.get($colors, light), border, subtle)};
-  --ndt-hover-bg: #{map.get(map.get($colors, light), hover, background)};
-  --ndt-hover-danger: #{map.get(map.get($colors, light), hover, danger)};
-  --ndt-shadow-toolbar: #{map.get(map.get($shadow-themes, light), toolbar)};
-  --ndt-shadow-tooltip: #{map.get(map.get($shadow-themes, light), tooltip)};
-  --ndt-shadow-window: #{map.get(map.get($shadow-themes, light), window)};
-
-  --ndt-spacing-xs: 4px;
-  --ndt-spacing-sm: 8px;
-  --ndt-spacing-md: 16px;
-  --ndt-window-padding: 24px;
-
-  --ndt-font-size-xs: #{map.get($font-sizes, xs)};
-  --ndt-font-size-sm: #{map.get($font-sizes, sm)};
-  --ndt-font-size-md: #{map.get($font-sizes, md)};
-  --ndt-font-size-lg: #{map.get($font-sizes, lg)};
-  --ndt-font-size-xl: #{map.get($font-sizes, xl)};
-
-  --ndt-background-secondary: var(--ndt-bg-primary);
-  --ndt-background-hover: var(--ndt-hover-bg);
-
-  --ndt-primary: #df30d4;
-  --ndt-primary-rgb: 223, 48, 212;
-  --ndt-text-on-primary: #{$color-white};
-
-  --ndt-border-color: var(--ndt-border-primary);
-
-  --ndt-note-background: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      note,
-      background
-    )};
-  --ndt-note-border: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      note,
-      border
-    )};
-  --ndt-warning-background: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      warning,
-      background
-    )};
-  --ndt-warning-border: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      warning,
-      border
-    )};
-  --ndt-error-background: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      error,
-      background
-    )};
-  --ndt-error-border: #{map.get(
-      map.get(map.get($colors, light), annotation),
-      error,
-      border
-    )};
-
-  &[data-theme='dark'] {
-    --ndt-bg-primary: #{map.get(map.get($colors, dark), background, primary)};
-    --ndt-bg-gradient: #{map.get(map.get($colors, dark), background, gradient)};
-    --ndt-text-primary: #{map.get(map.get($colors, dark), text, primary)};
-    --ndt-text-secondary: #{map.get(map.get($colors, dark), text, secondary)};
-    --ndt-text-muted: #{map.get(map.get($colors, dark), text, muted)};
-    --ndt-border-primary: #{map.get(map.get($colors, dark), border, primary)};
-    --ndt-border-subtle: #{map.get(map.get($colors, dark), border, subtle)};
-    --ndt-hover-bg: #{map.get(map.get($colors, dark), hover, background)};
-    --ndt-hover-danger: #{map.get(map.get($colors, dark), hover, danger)};
-    --ndt-shadow-toolbar: #{map.get(map.get($shadow-themes, dark), toolbar)};
-    --ndt-shadow-tooltip: #{map.get(map.get($shadow-themes, dark), tooltip)};
-    --ndt-shadow-window: #{map.get(map.get($shadow-themes, dark), window)};
-
-    --ndt-note-background: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        note,
-        background
-      )};
-    --ndt-note-border: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        note,
-        border
-      )};
-    --ndt-warning-background: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        warning,
-        background
-      )};
-    --ndt-warning-border: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        warning,
-        border
-      )};
-    --ndt-error-background: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        error,
-        background
-      )};
-    --ndt-error-border: #{map.get(
-        map.get(map.get($colors, dark), annotation),
-        error,
-        border
-      )};
-  }
-}
-
-.dev-toolbar {
-  @include devtools-theme;
-
-  // Typography styles
-  h1,
-  h2,
-  h3,
-  h4,
-  h5 {
-    font-weight: 600;
-    color: var(--ndt-text-primary);
-    margin: 0;
-  }
-
-  h1 {
-    font-size: var(--ndt-font-size-xl);
-  }
-  h2 {
-    font-size: var(--ndt-font-size-lg);
-  }
-  h3 {
-    font-size: var(--ndt-font-size-md);
-  }
-  h4 {
-    font-size: var(--ndt-font-size-sm);
-  }
-  h5 {
-    font-size: var(--ndt-font-size-xs);
-  }
-
-  hr {
-    border: 1px solid var(--ndt-border-subtle);
-    margin: 1em 0;
-  }
-
-  p {
-    line-height: 1.5em;
-    margin: 0;
-  }
-}

package/src/test-setup.ts

@@ -1,12 +0,0 @@
-import '@analogjs/vitest-angular/setup-zone';
-
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting,
-} from '@angular/platform-browser-dynamic/testing';
-import { getTestBed } from '@angular/core/testing';
-
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);

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

@@ -1,96 +0,0 @@
-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 { DevToolbarFlag } from './feature-flags.models';
-
-interface ForcedFlagsState {
-  enabled: string[];
-  disabled: string[];
-}
-
-@Injectable({ providedIn: 'root' })
-export class DevToolbarInternalFeatureFlagService {
-  private readonly STORAGE_KEY = 'feature-flags';
-  private storageService = inject(DevToolsStorageService);
-
-  private appFlags$ = new BehaviorSubject<DevToolbarFlag[]>([]);
-  private forcedFlagsSubject = new BehaviorSubject<ForcedFlagsState>({
-    enabled: [],
-    disabled: [],
-  });
-
-  private readonly forcedFlags$ = this.forcedFlagsSubject.asObservable();
-
-  public flags$: Observable<DevToolbarFlag[]> = 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();
-  }
-
-  setAppFlags(flags: DevToolbarFlag[]): void {
-    this.appFlags$.next(flags);
-  }
-
-  getAppFlags(): Observable<DevToolbarFlag[]> {
-    return this.appFlags$.asObservable();
-  }
-
-  getForcedFlags(): Observable<DevToolbarFlag[]> {
-    return this.flags$.pipe(
-      map((flags) => flags.filter((flag) => flag.isForced))
-    );
-  }
-
-  setFlag(flagId: string, isEnabled: boolean): void {
-    const { enabled, disabled } = this.forcedFlagsSubject.value;
-
-    const newEnabled = enabled.filter((id) => id !== flagId);
-    const newDisabled = disabled.filter((id) => id !== flagId);
-
-    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);
-  }
-
-  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/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';
-  }
-}