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

package/src/components/window/window.component.scss

@@ -0,0 +1,99 @@
+@use '../../styles' as *;
+@use 'sass:map';
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+.window {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: var(--devtools-bg-primary);
+  border: 1px solid var(--devtools-border-primary);
+  border-radius: var(--devtools-border-radius-large);
+  padding: var(--devtools-window-padding);
+  font-family: $font-family;
+  color: var(--devtools-text-secondary);
+  z-index: #{map.get($z-indices, window)};
+  box-shadow: var(--devtools-shadow-window);
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: var(--devtools-spacing-sm);
+
+    .beta-tag {
+      font-size: var(--devtools-font-size-xxs, 0.65rem);
+      background: var(--devtools-purple, #8b5cf6);
+      color: var(--devtools-text-on-primary);
+      padding: 1px 4px;
+      margin-left: var(--devtools-spacing-xs);
+      border-radius: var(--devtools-border-radius-small);
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+  }
+  &__description {
+    font-size: var(--devtools-font-size-sm);
+    color: var(--devtools-text-muted);
+  }
+
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__controls {
+    display: flex;
+    gap: var(--devtools-spacing-sm);
+  }
+
+
+}
+
+.content {
+  flex: 1;
+  overflow: auto;
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--devtools-border-primary);
+  margin-bottom: var(--devtools-spacing-md);
+  margin-top: var(--devtools-spacing-md);
+}
+
+.control {
+  background: none;
+  border: none;
+  color: var(--devtools-text-secondary);
+  cursor: pointer;
+  padding: var(--devtools-spacing-xs) var(--devtools-spacing-sm);
+  border-radius: var(--devtools-border-radius-small);
+  font-size: var(--devtools-font-size-md);
+  line-height: 1;
+  transition: var(--devtools-transition-smooth);
+
+  &:hover {
+    background: var(--devtools-hover-bg);
+    color: var(--devtools-text-primary);
+  }
+
+  &--close:hover {
+    background: var(--devtools-hover-danger);
+  }
+}

package/src/components/window/window.component.ts

@@ -0,0 +1,79 @@
+import { Component, computed, inject, input, output } from '@angular/core';
+import { DevToolbarStateService } from '../../dev-toolbar-state.service';
+import { WindowConfig } from './window.models';
+
+@Component({
+  selector: 'ndt-window',
+  standalone: true,
+  template: `
+    <div class="window dev-toolbar" [attr.data-theme]="theme()">
+      <div class="header">
+        <div class="header__content">
+          <div class="header__title">
+            <h1>{{ config().title }}</h1>
+            @if (config().isBeta) {
+              <span class="beta-tag">BETA</span>
+            }
+          </div>
+          <p class="header__description">{{ config().description }}</p>
+        </div>
+        <div class="header__controls">
+          @if (config().isMinimizable) {
+            <button
+              aria-label="Minimize"
+              class="control"
+              (click)="onMinimize()"
+            >
+              −
+            </button>
+          }
+          @if (config().isMaximizable) {
+            <button
+              aria-label="Maximize"
+              class="control"
+              (click)="onMaximize()"
+            >
+              □
+            </button>
+          }
+          @if (config().isClosable) {
+            <button
+              aria-label="Close"
+              class="control control--close"
+              (click)="onClose()"
+            >
+              ×
+            </button>
+          }
+        </div>
+      </div>
+
+      <div class="divider"></div>
+      <div class="content">
+        <ng-content></ng-content>
+      </div>
+    </div>
+  `,
+  styleUrls: ['./window.component.scss'],
+})
+export class DevToolbarWindowComponent {
+  readonly devToolbarStateService = inject(DevToolbarStateService);
+  readonly config = input.required<WindowConfig>();
+  readonly close = output<void>();
+  readonly maximize = output<void>();
+  readonly minimize = output<void>();
+
+  readonly theme = computed(() => this.devToolbarStateService.theme());
+
+  protected onClose(): void {
+    this.close.emit();
+  }
+
+  protected onMaximize(): void {
+    this.maximize.emit();
+  }
+
+  protected onMinimize(): void {
+    this.minimize.emit();
+  }
+}

package/src/components/window/window.models.ts

@@ -0,0 +1,28 @@
+export type WindowPlacement =
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'top-left'
+  | 'top-center'
+  | 'top-right';
+
+export type WindowSize = 'small' | 'medium' | 'tall' | 'large';
+export interface WindowConfig {
+  id: string;
+  /**
+   * The title of the window, this can be different from the name of the tool
+   */
+  title: string;
+  description?: string;
+  isClosable?: boolean;
+  isMaximizable?: boolean;
+  isMinimizable?: boolean;
+  placement?: WindowPlacement;
+  size?: WindowSize;
+  isBeta?: boolean;
+}
+
+export interface WindowPosition {
+  x: number;
+  y: number;
+}

package/src/dev-toolbar-state.service.ts

@@ -0,0 +1,89 @@
+import { Injectable, computed, signal } from '@angular/core';
+
+interface DevToolbarState {
+  isHidden: boolean;
+  activeToolId: string | null;
+  error: string | null;
+  theme: 'light' | 'dark';
+  delay: number;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DevToolbarStateService {
+  // Initial state
+  private state = signal<DevToolbarState>({
+    isHidden: true,
+    activeToolId: null,
+    delay: 3000,
+    error: null,
+    theme: 'dark',
+  });
+
+  // Selectors
+  readonly isVisible = computed(
+    () => !this.state().isHidden || this.hasActiveTool()
+  );
+  readonly isDarkTheme = computed(() => this.state().theme === 'dark');
+  readonly activeToolId = computed(() => this.state().activeToolId);
+  readonly hasActiveTool = computed(() => this.state().activeToolId !== null);
+  readonly error = computed(() => this.state().error);
+  readonly theme = computed(() => this.state().theme);
+  /**
+   * The delay to hide the toolbar
+   */
+  readonly delay = computed(() => this.state().delay);
+
+  // State updates
+  setVisibility(isVisible: boolean): void {
+    if (isVisible) {
+      this.state.update((state) => ({
+        ...state,
+        isHidden: false,
+      }));
+    } else {
+      if (this.activeToolId() === null) {
+        setTimeout(() => {
+          this.state.update((state) => ({
+            ...state,
+            isHidden: true,
+          }));
+        }, this.state().delay);
+      }
+    }
+  }
+
+  setTheme(theme: 'light' | 'dark'): void {
+    this.state.update((state) => ({
+      ...state,
+      theme,
+    }));
+  }
+
+  setActiveTool(toolId: string | null): void {
+    this.state.update((state) => ({
+      ...state,
+      activeToolId: toolId,
+    }));
+
+    if (toolId === null) {
+      this.setVisibility(false);
+    } else {
+      this.setVisibility(true);
+    }
+  }
+
+  // Public actions
+  toggleTool(toolId: string | null): void {
+    const currentToolId = this.activeToolId();
+    this.setActiveTool(currentToolId === toolId ? null : toolId);
+  }
+
+  toggleVisibility(): void {
+    this.state.update((state) => ({
+      ...state,
+      isHidden: !state.isHidden,
+    }));
+  }
+}

package/src/dev-toolbar.component.scss

@@ -0,0 +1,22 @@
+@use './styles' as devtools;
+@use 'sass:map';
+
+.dev-toolbar {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  z-index: map.get(devtools.$z-indices, toolbar);
+  transform: translateX(-50%);
+  display: flex;
+  pointer-events: auto;
+  background: var(--devtools-bg-primary);
+  border: 1px solid var(--devtools-border-primary);
+  border-radius: map.get(map.get(devtools.$dimensions, border-radius), full);
+  box-shadow: var(--devtools-shadow-toolbar);
+  height: map.get(devtools.$dimensions, toolbar-height);
+  overflow: hidden;
+
+  &--active {
+    opacity: 1;
+  }
+}

package/src/dev-toolbar.component.ts

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

@@ -1 +1,6 @@
-export * from './lib/ngx-dev-toolbar/ngx-dev-toolbar.component';
+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[]>;
+}