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

package/src/styles.scss

@@ -0,0 +1,363 @@
+@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,
+);
+
+.dev-toolbar {
+  // Border radius variables
+  --devtools-border-radius-small: #{map.get(
+      map.get($dimensions, border-radius),
+      small
+    )};
+  --devtools-border-radius-medium: #{map.get(
+      map.get($dimensions, border-radius),
+      medium
+    )};
+  --devtools-border-radius-large: #{map.get(
+      map.get($dimensions, border-radius),
+      large
+    )};
+
+  // Transition variables
+  --devtools-transition-default: #{map.get($transitions, default)};
+  --devtools-transition-smooth: #{map.get($transitions, smooth)};
+
+  // Default light theme
+  --devtools-bg-primary: #{map.get(map.get($colors, light), background, primary)};
+  --devtools-bg-gradient: #{map.get(
+      map.get($colors, light),
+      background,
+      gradient
+    )};
+  --devtools-text-primary: #{map.get(map.get($colors, light), text, primary)};
+  --devtools-text-secondary: #{map.get(map.get($colors, light), text, secondary)};
+  --devtools-text-muted: #{map.get(map.get($colors, light), text, muted)};
+  --devtools-border-primary: #{map.get(map.get($colors, light), border, primary)};
+  --devtools-border-subtle: #{map.get(map.get($colors, light), border, subtle)};
+  --devtools-hover-bg: #{map.get(map.get($colors, light), hover, background)};
+  --devtools-hover-danger: #{map.get(map.get($colors, light), hover, danger)};
+  --devtools-shadow-toolbar: #{map.get(map.get($shadow-themes, light), toolbar)};
+  --devtools-shadow-tooltip: #{map.get(map.get($shadow-themes, light), tooltip)};
+  --devtools-shadow-window: #{map.get(map.get($shadow-themes, light), window)};
+
+  // Add these spacing variables
+  --devtools-spacing-xs: 4px;
+  --devtools-spacing-sm: 8px;
+  --devtools-spacing-md: 16px;
+  --devtools-window-padding: 24px;
+
+  // Add font size CSS variables
+  --devtools-font-size-xs: #{map.get($font-sizes, xs)};
+  --devtools-font-size-sm: #{map.get($font-sizes, sm)};
+  --devtools-font-size-md: #{map.get($font-sizes, md)};
+  --devtools-font-size-lg: #{map.get($font-sizes, lg)};
+  --devtools-font-size-xl: #{map.get($font-sizes, xl)};
+
+  // Background colors
+  --devtools-background-secondary: var(--devtools-bg-primary);
+  --devtools-background-hover: var(--devtools-hover-bg);
+
+  // Primary color for active states
+  --devtools-primary: #df30d4; // You can adjust this color value
+  --devtools-text-on-primary: #{$color-white};
+
+  // Border color
+  --devtools-border-color: var(--devtools-border-primary);
+
+  // Typography styles
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    font-weight: 600;
+    color: var(--devtools-text-primary);
+    margin: 0;
+  }
+
+  h1 {
+    font-size: var(--devtools-font-size-xl);
+  }
+  h2 {
+    font-size: var(--devtools-font-size-lg);
+  }
+  h3 {
+    font-size: var(--devtools-font-size-md);
+  }
+  h4 {
+    font-size: var(--devtools-font-size-sm);
+  }
+  h5 {
+    font-size: var(--devtools-font-size-xs);
+  }
+
+  hr {
+    border: 1px solid var(--devtools-border-subtle);
+    margin: 1em 0;
+  }
+
+  p {
+    line-height: 1.5em;
+    margin: 0;
+  }
+  --devtools-note-background: #{map.get(
+      map.get(map.get($colors, light), annotation),
+      note,
+      background
+    )};
+  --devtools-note-border: #{map.get(
+      map.get(map.get($colors, light), annotation),
+      note,
+      border
+    )};
+  --devtools-warning-background: #{map.get(
+      map.get(map.get($colors, light), annotation),
+      warning,
+      background
+    )};
+  --devtools-warning-border: #{map.get(
+      map.get(map.get($colors, light), annotation),
+      warning,
+      border
+    )};
+  --devtools-error-background: #{map.get(
+      map.get(map.get($colors, light), annotation),
+      error,
+      background
+    )};
+  --devtools-error-border: #{map.get(
+      map.get(map.get($colors, light), annotation),
+      error,
+      border
+    )};
+
+  &[data-theme='dark'] {
+    --devtools-bg-primary: #{map.get(
+        map.get($colors, dark),
+        background,
+        primary
+      )};
+    --devtools-bg-gradient: #{map.get(
+        map.get($colors, dark),
+        background,
+        gradient
+      )};
+    --devtools-text-primary: #{map.get(map.get($colors, dark), text, primary)};
+    --devtools-text-secondary: #{map.get(
+        map.get($colors, dark),
+        text,
+        secondary
+      )};
+    --devtools-text-muted: #{map.get(map.get($colors, dark), text, muted)};
+    --devtools-border-primary: #{map.get(
+        map.get($colors, dark),
+        border,
+        primary
+      )};
+    --devtools-border-subtle: #{map.get(map.get($colors, dark), border, subtle)};
+    --devtools-hover-bg: #{map.get(map.get($colors, dark), hover, background)};
+    --devtools-hover-danger: #{map.get(map.get($colors, dark), hover, danger)};
+    --devtools-shadow-toolbar: #{map.get(map.get($shadow-themes, dark), toolbar)};
+    --devtools-shadow-tooltip: #{map.get(map.get($shadow-themes, dark), tooltip)};
+    --devtools-shadow-window: #{map.get(map.get($shadow-themes, dark), window)};
+
+    --devtools-note-background: #{map.get(
+        map.get(map.get($colors, dark), annotation),
+        note,
+        background
+      )};
+    --devtools-note-border: #{map.get(
+        map.get(map.get($colors, dark), annotation),
+        note,
+        border
+      )};
+    --devtools-warning-background: #{map.get(
+        map.get(map.get($colors, dark), annotation),
+        warning,
+        background
+      )};
+    --devtools-warning-border: #{map.get(
+        map.get(map.get($colors, dark), annotation),
+        warning,
+        border
+      )};
+    --devtools-error-background: #{map.get(
+        map.get(map.get($colors, dark), annotation),
+        error,
+        background
+      )};
+    --devtools-error-border: #{map.get(
+        map.get(map.get($colors, dark), annotation),
+        error,
+        border
+      )};
+  }
+}

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

@@ -0,0 +1,96 @@
+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 DevToolbarInternalFeatureFlagService {
+  private readonly STORAGE_KEY = 'feature-flags';
+  private storageService = inject(DevToolsStorageService);
+
+  private appFlags$ = new BehaviorSubject<Flag[]>([]);
+  private forcedFlagsSubject = new BehaviorSubject<ForcedFlagsState>({
+    enabled: [],
+    disabled: [],
+  });
+
+  private readonly forcedFlags$ = this.forcedFlagsSubject.asObservable();
+
+  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();
+  }
+
+  setAppFlags(flags: Flag[]): void {
+    this.appFlags$.next(flags);
+  }
+
+  getAppFlags(): Observable<Flag[]> {
+    return this.appFlags$.asObservable();
+  }
+
+  getForcedFlags(): Observable<Flag[]> {
+    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

@@ -0,0 +1,262 @@
+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 { WindowSize } from '../../components/window/window.models';
+import { DevToolbarInternalFeatureFlagService } from './feature-flags-internal.service';
+import { FeatureFlagFilter, Flag } from './feature-flags.models';
+
+@Component({
+  selector: 'ndt-feature-flags-tool',
+  standalone: true,
+  imports: [
+    FormsModule,
+    DevToolbarToolComponent,
+    DevToolbarInputComponent,
+    DevToolbarSelectComponent,
+  ],
+  template: `
+    <ndt-toolbar-tool
+      [windowConfig]="windowConfig"
+      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(--devtools-spacing-sm);
+        margin-bottom: var(--devtools-spacing-md);
+
+        ndt-input {
+          flex: 0.65;
+        }
+
+        ndt-select {
+          flex: 0.35;
+        }
+      }
+
+      .empty {
+        display: flex;
+        flex-direction: column;
+        gap: var(--devtools-spacing-md);
+        flex: 1;
+        min-height: 0;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid var(--devtools-warning-border);
+        border-radius: var(--devtools-border-radius-medium);
+        padding: var(--devtools-spacing-md);
+        background: var(--devtools-warning-background);
+        color: var(--devtools-text-muted);
+      }
+
+      .flag-list {
+        display: flex;
+        flex-direction: column;
+        gap: var(--devtools-spacing-md);
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding-right: var(--devtools-spacing-sm);
+
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: var(--devtools-background-secondary);
+          border-radius: 4px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: var(--devtools-border-primary);
+          border-radius: 4px;
+
+          &:hover {
+            background: var(--devtools-hover-bg);
+          }
+        }
+
+        scrollbar-width: thin;
+        scrollbar-color: var(--devtools-border-primary)
+          var(--devtools-background-secondary);
+      }
+
+      .flag {
+        display: flex;
+        flex-direction: row;
+        gap: var(--devtools-spacing-sm);
+        background: var(--devtools-background-secondary);
+        .info {
+          flex: 0 0 65%;
+          h3 {
+            margin: 0;
+            font-size: var(--devtools-font-size-md);
+            color: var(--devtools-text-primary);
+          }
+
+          p {
+            font-size: var(--devtools-font-size-xs);
+            color: var(--devtools-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 windowConfig = {
+    title: 'Feature Flags',
+    description: 'Manage the feature flags for your current session',
+    isClosable: true,
+    size: 'tall' as WindowSize,
+    id: 'ndt-feature-flags',
+    isBeta: true,
+  };
+
+  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 (false)' },
+    { value: 'on', label: 'Forced On (true)' },
+  ];
+
+  // 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: Flag): string {
+    if (!flag.isForced) return '';
+    return flag.isEnabled ? 'on' : 'off';
+  }
+}