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

package/src/components/tool-button/tool-button.component.ts

@@ -0,0 +1,126 @@
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from '@angular/animations';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { DevToolbarStateService } from '../../dev-toolbar-state.service';
+
+@Component({
+  selector: 'ndt-tool-button',
+  standalone: true,
+  template: `
+    <button
+      class="tool-button"
+      [class.tool-button--active]="isActive()"
+      [class.tool-button--focus]="isFocused()"
+      (mouseenter)="onMouseEnter()"
+      (focusin)="onFocus()"
+      (focusout)="onBlur()"
+      (mouseleave)="onMouseLeave()"
+      (keydown.escape)="onEscape()"
+    >
+      @if (isTooltipVisible()) {
+      <span
+        class="tooltip"
+        [@tooltipAnimation]="tooltipState ? 'visible' : 'hidden'"
+      >
+        {{ tooltip() }}
+      </span>
+      }
+      <ng-content />
+    </button>
+  `,
+  styleUrls: ['./tool-button.component.scss'],
+  animations: [
+    trigger('tooltipAnimation', [
+      state(
+        'hidden',
+        style({
+          opacity: 0,
+          transform: 'translateX(-50%) translateY(1rem)',
+        })
+      ),
+      state(
+        'visible',
+        style({
+          opacity: 1,
+          transform: 'translateX(-50%) translateY(0)',
+        })
+      ),
+      transition('hidden => visible', [animate('200ms ease-out')]),
+      transition('visible => hidden', [animate('150ms ease-in')]),
+    ]),
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DevToolbarToolButtonComponent {
+  // Injects
+  private readonly state = inject(DevToolbarStateService);
+  private readonly elementRef = inject(ElementRef);
+
+  // Inputs
+  readonly title = input.required<string>();
+  readonly toolId = input.required<string>();
+
+  // Outputs
+  readonly open = output<void>();
+
+  // Signals
+  readonly isActive = computed(
+    () => this.state.activeToolId() === this.toolId()
+  );
+  readonly isToolbarVisible = this.state.isVisible;
+
+  readonly isFocused = signal(false);
+  readonly tooltip = computed(
+    () =>
+      this.elementRef.nativeElement.parentElement?.getAttribute(
+        'data-tooltip'
+      ) ?? ''
+  );
+  readonly isTooltipVisible = computed(
+    () => this.tooltip() && !this.isActive()
+  );
+
+  // Properties
+  protected tooltipState = false;
+  private readonly hideDelay = 3000;
+
+  // Public methods
+  onClick(): void {
+    this.isFocused.set(false);
+    this.open.emit();
+  }
+
+  onMouseEnter(): void {
+    this.tooltipState = true;
+  }
+
+  onMouseLeave(): void {
+    this.tooltipState = false;
+  }
+
+  onEscape(): void {
+    this.isFocused.set(false);
+  }
+
+  onFocus(): void {
+    this.isFocused.set(true);
+  }
+
+  onBlur(): void {
+    this.isFocused.set(false);
+  }
+}

package/src/components/toolbar-tool/toolbar-tool.component.scss

@@ -0,0 +1,9 @@
+@use '../../styles' as devtools;
+
+.tool {
+  position: relative;
+}
+
+.trigger {
+  cursor: pointer;
+}

package/src/components/toolbar-tool/toolbar-tool.component.ts

@@ -0,0 +1,169 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+import { CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ContentChild,
+  ElementRef,
+  ViewChild,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { DevToolbarStateService } from '../../dev-toolbar-state.service';
+import { DevToolbarIconComponent } from '../icons/icon.component';
+import { IconName } from '../icons/icon.models';
+import { DevToolbarToolButtonComponent } from '../tool-button/tool-button.component';
+import { DevToolbarWindowComponent } from '../window/window.component';
+import { DevToolbarWindowOptions } from './toolbar-tool.models';
+
+@Component({
+  selector: 'ndt-toolbar-tool',
+  standalone: true,
+  imports: [
+    CdkConnectedOverlay,
+    OverlayModule,
+    DevToolbarWindowComponent,
+    DevToolbarToolButtonComponent,
+    DevToolbarIconComponent,
+  ],
+  template: `
+    <div #trigger="cdkOverlayOrigin" class="dev-toolbar-tool" cdkOverlayOrigin>
+      <div
+        class="dev-toolbar-tool__icon"
+        (click)="onOpen()"
+        (keydown.enter)="onOpen()"
+        (keydown.space)="onOpen()"
+        tabindex="0"
+      >
+        <div #buttonContainer [attr.data-tooltip]="title()">
+          @if (icon()) {
+          <ndt-tool-button [title]="title()" [toolId]="options().id">
+            <ndt-icon [name]="icon()" />
+          </ndt-tool-button>
+          } @else {
+          <ng-content select="ndt-tool-button"></ng-content>
+          }
+        </div>
+      </div>
+
+      @if (isActive()) {
+      <ng-template
+        #contentTemplate
+        [cdkConnectedOverlayOrigin]="trigger"
+        [cdkConnectedOverlayOpen]="isActive()"
+        [cdkConnectedOverlayPositions]="positions()"
+        [cdkConnectedOverlayWidth]="width()"
+        [cdkConnectedOverlayHeight]="height()"
+        cdkConnectedOverlay
+      >
+        <ndt-window [@slideAnimation] [config]="options()" (close)="onClose()">
+          <ng-content />
+        </ndt-window>
+      </ng-template>
+      }
+    </div>
+  `,
+  styleUrl: './toolbar-tool.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('slideAnimation', [
+      transition(':enter', [
+        style({
+          transform: 'translateY(20px)',
+          opacity: 0,
+        }),
+        animate(
+          '400ms cubic-bezier(0.4, 0, 0.2, 1)',
+          style({
+            transform: 'translateY(0)',
+            opacity: 1,
+          })
+        ),
+      ]),
+      transition(':leave', [
+        style({
+          transform: 'translateY(0)',
+          opacity: 1,
+        }),
+        animate(
+          '400ms cubic-bezier(0.4, 0, 0.2, 1)',
+          style({
+            transform: 'translateY(20px)',
+            opacity: 0,
+          })
+        ),
+      ]),
+    ]),
+  ],
+})
+export class DevToolbarToolComponent {
+  state = inject(DevToolbarStateService);
+  @ViewChild('buttonContainer') buttonContainer!: ElementRef;
+
+  @ContentChild(DevToolbarToolButtonComponent)
+  buttonComponent!: DevToolbarToolButtonComponent;
+
+  options = input.required<DevToolbarWindowOptions>();
+  icon = input.required<IconName>();
+  title = input.required<string>();
+  isActive = computed(() => this.state.activeToolId() === this.options().id);
+  height = computed(() => {
+    switch (this.options().size) {
+      case 'small':
+        return 320;
+      case 'medium':
+        return 480;
+      case 'tall':
+        return 620;
+      case 'large':
+        return 620;
+      default:
+        return 480;
+    }
+  });
+
+  width = computed(() => {
+    switch (this.options().size) {
+      case 'small':
+        return 320;
+      case 'medium':
+        return 480;
+      case 'tall':
+        return 480;
+      case 'large':
+        return 620;
+      default:
+        return 400;
+    }
+  });
+  positions = computed(() => {
+    const triggerXPosition = this.getButtonContainerXPosition();
+    const windowCenter = window.innerWidth / 2;
+    const offsetX = windowCenter - triggerXPosition - 22;
+    return [
+      {
+        originX: 'center' as const,
+        originY: 'center' as const,
+        overlayX: 'center' as const,
+        overlayY: 'center' as const,
+        offsetY: -(Math.ceil(this.height() / 2) + 36),
+        offsetX,
+      },
+    ];
+  });
+
+  onOpen(): void {
+    this.state.setActiveTool(this.options().id);
+  }
+
+  onClose(): void {
+    this.state.setActiveTool(null);
+  }
+
+  getButtonContainerXPosition(): number {
+    const buttonContainerRect =
+      this.buttonContainer?.nativeElement?.getBoundingClientRect();
+    return buttonContainerRect?.left ?? 0;
+  }
+}

package/src/components/toolbar-tool/toolbar-tool.models.ts

@@ -0,0 +1,33 @@
+import { IconName } from '../icons/icon.models';
+
+export interface DevToolbarWindowPosition {
+  x: number;
+  y: number;
+}
+export interface DevToolbarWindowOptions {
+  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?:
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right'
+    | 'top-left'
+    | 'top-center'
+    | 'top-right';
+  size?: 'small' | 'medium' | 'tall' | 'large';
+  isBeta?: boolean;
+}
+
+export interface DevToolbarToolOptions {
+  icon: IconName;
+  name: string;
+  windowOptions: DevToolbarWindowOptions;
+  isBeta?: boolean;
+}

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

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

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

@@ -0,0 +1,69 @@
+import { Component, computed, inject, input, output } from '@angular/core';
+import { DevToolbarStateService } from '../../dev-toolbar-state.service';
+import { DevToolbarWindowOptions } from '../toolbar-tool/toolbar-tool.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<DevToolbarWindowOptions>();
+  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/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(--ndt-bg-primary);
+  border: 1px solid var(--ndt-border-primary);
+  border-radius: map.get(map.get(devtools.$dimensions, border-radius), full);
+  box-shadow: var(--ndt-shadow-toolbar);
+  height: map.get(devtools.$dimensions, toolbar-height);
+  overflow: hidden;
+
+  &--active {
+    opacity: 1;
+  }
+}