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

package/src/dev-toolbar.component.ts

@@ -0,0 +1,105 @@
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import {
+  Component,
+  DestroyRef,
+  OnInit,
+  inject,
+  isDevMode,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent } from 'rxjs';
+import { filter, throttleTime } from 'rxjs/operators';
+import { DevToolbarStateService } from './dev-toolbar-state.service';
+import { DevToolbarFeatureFlagsToolComponent } from './tools/feature-flags-tool/feature-flags-tool.component';
+import { DevToolbarHomeToolComponent } from './tools/home-tool/home-tool.component';
+import { SettingsService } from './tools/home-tool/settings.service';
+import { DevToolbarLanguageToolComponent } from './tools/language-tool/language-tool.component';
+
+@Component({
+  standalone: true,
+  selector: 'ndt-toolbar',
+  styleUrls: ['./dev-toolbar.component.scss'],
+  imports: [
+    DevToolbarHomeToolComponent,
+    DevToolbarLanguageToolComponent,
+    DevToolbarFeatureFlagsToolComponent,
+  ],
+  template: `
+    @if (isDevMode) {
+    <div
+      aria-label="Developer tools"
+      role="toolbar"
+      class="dev-toolbar"
+      [@toolbarState]="state.isVisible() ? 'visible' : 'hidden'"
+      [attr.data-theme]="state.theme()"
+      [class.dev-toolbar--active]="state.isVisible()"
+      (mouseenter)="onMouseEnter()"
+    >
+      <ndt-home-tool />
+      <ndt-language-tool />
+      <ndt-feature-flags-tool />
+      <ng-content />
+    </div>
+    }
+  `,
+  animations: [
+    trigger('toolbarState', [
+      state(
+        'hidden',
+        style({
+          transform: 'translate(-50%, calc(100% + -1.2rem))',
+        })
+      ),
+      state(
+        'visible',
+        style({
+          transform: 'translate(-50%, -1rem)',
+        })
+      ),
+      transition('hidden <=> visible', [
+        animate('300ms cubic-bezier(0.4, 0, 0.2, 1)'),
+      ]),
+    ]),
+  ],
+})
+export class DevToolbarComponent implements OnInit {
+  state = inject(DevToolbarStateService);
+  destroyRef = inject(DestroyRef);
+  settingsService = inject(SettingsService);
+
+  isDevMode = isDevMode();
+
+  private keyboardShortcut = fromEvent<KeyboardEvent>(window, 'keydown')
+    .pipe(
+      filter((event) => event.ctrlKey && event.shiftKey && event.key === 'D'),
+      takeUntilDestroyed(this.destroyRef)
+    )
+    .subscribe(() => this.toggleDevTools());
+
+  private mouseLeave = fromEvent<MouseEvent>(document, 'mouseleave')
+    .pipe(throttleTime(3000), takeUntilDestroyed(this.destroyRef))
+    .subscribe(() => this.onMouseLeave());
+
+  ngOnInit(): void {
+    const settings = this.settingsService.getSettings();
+    this.state.setTheme(settings.isDarkMode ? 'dark' : 'light');
+  }
+
+  onMouseEnter(): void {
+    this.state.setVisibility(true);
+  }
+
+  onMouseLeave(): void {
+    setTimeout(() => this.state.setVisibility(false), this.state.delay());
+  }
+
+  private toggleDevTools(): void {
+    this.state.setVisibility(!this.state.isVisible());
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+export * from './components/icons/icon.component';
+export * from './components/icons/icon.models';
+export * from './components/toolbar-tool/toolbar-tool.component';
+export * from './components/toolbar-tool/toolbar-tool.models';
+export * from './dev-toolbar.component';
+export * from './models/dev-tools.interface';
+export * from './tools/feature-flags-tool/feature-flags.models';
+export * from './tools/feature-flags-tool/feature-flags.service';
+export * from './tools/language-tool/language.models';
+export * from './tools/language-tool/language.service';

package/src/models/dev-tools.interface.ts

@@ -0,0 +1,19 @@
+import { Observable } from 'rxjs';
+
+/**
+ * Interface that should be implemented by any tool service that is used in the dev toolbar
+ */
+export interface DevToolsService<OptionType> {
+  /**
+   * Sets the available options that will be displayed in the tool on the dev toolbar
+   * @param options The options to be displayed
+   */
+  setAvailableOptions(options: OptionType[]): void;
+
+  /**
+   * Gets the values that were forced/modified through the tool on the dev toolbar.
+   * If the tool only supports a single option, the returned array will have a single element.
+   * @returns Observable of forced values array
+   */
+  getForcedValues(): Observable<OptionType[]>;
+}

package/src/styles.scss

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

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

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